Angular跨组件订阅不更新值：登录后Navbar未显示退出按钮

场景与问题 #

我是Angular新手，构建Web应用时遇到问题：两个无关组件间，一个组件的值变更后，另一个组件无法通过Subscription更新对应值。

根组件app.component.html结构：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

路由默认跳转登录页，除非用户ID和Token已存入Cookie并通过服务器验证。用户登录成功存入Cookie后，Navbar应显示退出按钮，但目前Navbar的isAuthenticated属性始终未更新。

相关代码 #

Navbar组件 #

navbar.component.html

<nav class="bg-dark border-bottom border-body" data-bs-theme="dark">
    <a routerLink="">Home</a>
    <button *ngIf="isAuthenticated" routerLink="login" class="logout">Log out</button>
</nav>

navbar.component.ts

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

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

  isAuthenticated: boolean = false
  authSubscription: Subscription

  constructor(private authService: AuthService) {
  }

  ngOnInit(): void {
    this.authSubscription = this.authService.isAuthenticated$.subscribe((isAuthenticated) =>
      {
        this.isAuthenticated = isAuthenticated
      }
    )
  }

  ngOnDestroy(): void {
    this.authSubscription.unsubscribe()
  }
}

认证服务 auth.service.ts #

import { Injectable } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { AUTHENTICATE } from './graphql/graphql.queries';
import { Apollo } from 'apollo-angular';
import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: "root",
})
export class AuthService {

  isAuthenticated = false;
  error: any

  private isAuthenticatedBS = new BehaviorSubject<boolean>(this.isAuthenticated)
  public isAuthenticated$ : Observable<boolean> = this.isAuthenticatedBS.asObservable()

  constructor(private cookieService: CookieService, private apollo: Apollo) {
    this.checkAuthentication()
  }

  async checkAuthentication(): Promise<boolean> {
    this.isAuthenticated = await this.authenticate()
    return this.isAuthenticated;
  }

  async authenticate()
  {
    if(this.cookieService.get("userId") && this.cookieService.get("token"))
    {
      const response = await firstValueFrom(this.apollo.query({
        query: AUTHENTICATE,
        variables: {
          userId: +this.cookieService.get("userId"),
        },
        fetchPolicy: 'network-only',
      }));

      if(<number>(<any>response.data).authenticate != null)
      {
        if(<number>(<any>response.data).authenticate.id > 0)
        {
          return true
        }
      }
      return false
    }
    else
    {
      return false
    }
  }
}

预期流程与排查情况 #

• 预期流程：用户登录成功后，Token和用户ID存入Cookie（此部分正常），跳转首页；访问需认证页面时，auth.guard调用checkAuthentication验证；登录后Navbar显示退出按钮，登出删除Cookie后隐藏。
• 已尝试操作：手动触发变更检测、控制台日志验证认证成功、使用Chrome Angular DevTools排查，问题仍未解决。

问题根源与解决方案 #

问题根源 #

AuthService中仅更新了isAuthenticated变量，但从未调用BehaviorSubject的next()方法推送新值到订阅者。Navbar组件订阅的isAuthenticated$是BehaviorSubject的Observable，只有当BehaviorSubject调用next()时，订阅者才会收到状态更新。

修复步骤 #

1. 完善checkAuthentication方法，更新状态后推送新值：

async checkAuthentication(): Promise<boolean> {
  this.isAuthenticated = await this.authenticate();
  // 推送更新到所有订阅者
  this.isAuthenticatedBS.next(this.isAuthenticated);
  return this.isAuthenticated;
}

2. 登录成功后触发状态更新：在登录组件写入Cookie后，调用checkAuthentication或直接推送状态：

// 登录组件示例代码
// 写入Cookie后
await this.authService.checkAuthentication();
// 或者直接推送状态
this.authService.isAuthenticatedBS.next(true);

3. 登出时同步更新状态：删除Cookie后推送未认证状态：

// 登出逻辑示例
this.cookieService.delete("userId");
this.cookieService.delete("token");
this.authService.isAuthenticatedBS.next(false);

额外优化建议 #

• 封装状态更新逻辑：避免直接操作BehaviorSubject，在AuthService中新增专门方法，符合封装原则：

setAuthenticatedStatus(status: boolean) {
  this.isAuthenticated = status;
  this.isAuthenticatedBS.next(status);
}

• 简化authenticate方法逻辑，直接返回验证结果，无需额外赋值操作。

内容的提问来源于stack exchange，提问作者Florian Meier