Angular服务变量的更新值没有反映在组件中

Question

我在访问angular组件中的服务变量值时遇到了问题。导航栏组件在服务内部设置用户登录，路由保护负责启用子路由，但是路由保护无法获取userStatus

的更新值。

import { Component, OnInit } from '@angular/core';
import { UserDetailsService } from '../user-details.service.js';
import { Router } from '@angular/router';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
UserStatus: boolean;
constructor( private UserService: UserDetailsService, private router: Router) { }
ngOnInit() {
this.UserService.UserStatus.subscribe((data: boolean) => {
this.UserStatus = data;
});
this.UserService.getUserStatus();
}
logout() {
this.UserService.UpdateStatus(false);
this.router.navigate(['login']);
}
login() {
this.UserService.UpdateStatus(true);
this.router.navigate(['home/products']);
}
}

路由保护组件

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanActivateChild} from '@angular/router';
import { Observable } from 'rxjs';
import { UserDetailsService } from './user-details.service.js';
@Injectable({
providedIn: 'root'
})
export class LoginGuardGuard implements CanActivateChild, CanActivate {
constructor(private userDetails: UserDetailsService, private router: Router) {}
canActivateChild(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.userDetails.getUserStatus()) {
return true;
} else {
this.router.navigate(['login']);
// return false;
}
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.userDetails.getUserStatus()) {
return true;
} else {
this.router.navigate(['login']);
return false;
}
}
}

Answer 1

这是因为在你的app-navbar和route-guard组件中，你用js扩展导入了你的服务，这违背了angular内部服务的单例模型。

由于.js扩展名，转译器将它们识别为两个独立的实例。

改变

的导入

import { UserDetailsService } from '../user-details.service.js';

import { UserDetailsService } from '../user-details.service';

应该可以解决这个问题。