Angular 组件中未反映服务变量更新值

Question

我在访问 angular 组件内的服务变量值时遇到问题。 Navbar 组件将用户设置为在服务内登录，路由守卫负责启用子路由，但路由守卫无法获取 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 扩展名的服务，这违反了 [=25= 内的单例服务模型].

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

因此更改从

的导入

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

至

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

应该可以解决问题。

Angular 组件中未反映服务变量更新值

Angular service variable updated value not reflected in component

angular-services

angular2-routing

angular

angular-route-guards