Angular导航组件登录后状态未更新问题求助

需求：用户登录后，导航栏需从Login切换为Logout，登录后组件布局保持不变，但当前使用OnChanges生命周期钩子无效果。

现有代码 #

HTML模板 #

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="assets/blacklogo.png" alt="Promme" width="30" height="24">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item" *ngIf="!login">
          <a class="nav-link active" aria-current="page" routerLink="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/deals">Deals</a>
        </li>
      </ul>
      <div class="d-flex">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li  class="nav-item" *ngIf="login == false" routerLink="/login">
            <a class="nav-link " aria-current="page">Login</a>
          </li>
          <li class="nav-item" *ngIf="login == true" (click)="logout()">
            <a class="nav-link " aria-current="page">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

TS组件代码 #

import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {AuthService} from "../../service/auth.service";

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit,OnChanges{

  login: Boolean | undefined;

  constructor(private auth:AuthService) {
  }


  ngOnInit(): void {
    console.log(this.isLogin())
    console.log("change")
  }

  isLogin(){
    return this.auth.isUserLoggedIn()
  }

  logout(){
    this.auth.logout()
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (this.isLogin()){
      this.login=true;
    }else {
      this.login=false;
    }
  }

}

问题原因 #

1. OnChanges钩子使用错误：该钩子仅监听组件**@Input装饰的输入属性**变化，当前组件中login并非输入属性，因此ngOnChanges永远不会触发，login变量无法更新。
2. 初始状态未初始化：login变量初始值为undefined，模板中*ngIf="login == false"的判断逻辑会不符合预期（undefined == false为false）。
3. 登录状态变化无通知：当用户登录/登出时，组件无法感知AuthService中的状态变化，导致视图未同步更新。

解决方案 #

方案1：直接在模板中调用状态判断方法（快速实现） #

无需维护login变量，直接在模板中调用isLogin()方法实时获取登录状态，简化代码：

修改HTML模板中的*ngIf条件：

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item" *ngIf="!isLogin()" routerLink="/login">
    <a class="nav-link " aria-current="page">Login</a>
  </li>
  <li class="nav-item" *ngIf="isLogin()" (click)="logout()">
    <a class="nav-link " aria-current="page">Logout</a>
  </li>
</ul>

同时移除TS组件中无用的login变量和OnChanges相关代码：

import {Component, OnInit} from '@angular/core';
import {AuthService} from "../../service/auth.service";

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit{

  constructor(private auth:AuthService) {
  }

  ngOnInit(): void {
  }

  isLogin(){
    return this.auth.isUserLoggedIn()
  }

  logout(){
    this.auth.logout()
  }

}

方案2：用BehaviorSubject实现状态订阅（规范Angular做法） #

在AuthService中使用BehaviorSubject发布登录状态变化，组件订阅该状态自动更新视图，适合复杂场景：

1. 修改AuthService

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 用BehaviorSubject保存登录状态，初始值为false
  private loginStatusSubject = new BehaviorSubject<boolean>(false);
  public loginStatus$: Observable<boolean> = this.loginStatusSubject.asObservable();

  constructor() {
    // 初始化时从本地存储读取状态（如果有）
    const isLoggedIn = !!localStorage.getItem('userToken');
    this.loginStatusSubject.next(isLoggedIn);
  }

  login(token: string) {
    localStorage.setItem('userToken', token);
    // 更新登录状态
    this.loginStatusSubject.next(true);
  }

  logout() {
    localStorage.removeItem('userToken');
    // 更新登录状态
    this.loginStatusSubject.next(false);
  }

  isUserLoggedIn(): boolean {
    return this.loginStatusSubject.value;
  }
}

2. 修改导航组件TS

import {Component, OnInit, OnDestroy} from '@angular/core';
import {AuthService} from "../../service/auth.service";
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit, OnDestroy{
  login: boolean = false;
  private statusSubscription!: Subscription;

  constructor(private auth:AuthService) {
  }

  ngOnInit(): void {
    // 订阅登录状态变化
    this.statusSubscription = this.auth.loginStatus$.subscribe(status => {
      this.login = status;
    });
  }

  logout(){
    this.auth.logout()
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.statusSubscription.unsubscribe();
  }
}

3. 模板保持原逻辑不变

原HTML模板中的*ngIf="login == false"和*ngIf="login == true"可以正常使用，因为login变量会随状态变化自动更新。

内容的提问来源于stack exchange，提问作者Sahil Mankani