Angular跨组件监听User对象变化时subscribe报错问题排查

错误原因分析 #

你在app.component.ts里仅声明了user$但未初始化，直接调用subscribe时它仍为undefined，因此抛出Cannot read properties of undefined (reading 'subscribe')错误。另外你的手动订阅逻辑完全多余——HTML中已经使用async管道，它会自动处理Observable的订阅与销毁，无需手动操作。

修复步骤 #

1. 修正账号服务的初始化逻辑 #

你的account.service.ts初始化BehaviorSubject时存在JSON解析风险：若localStorage.getItem('user')返回null，JSON.parse('')会抛出语法错误。修改初始化代码：

// 原代码
this.userSubject = new BehaviorSubject<IUser>(JSON.parse(localStorage.getItem('user') ?? ''));
// 修改后
const storedUser = localStorage.getItem('user');
this.userSubject = new BehaviorSubject<IUser | null>(storedUser ? JSON.parse(storedUser) : null);

同时更新user的类型声明以保证类型安全：

public user: Observable<IUser | null>;

2. 简化AppComponent的逻辑 #

直接将账号服务的user Observable赋值给组件的user$，无需手动订阅：

// app.component.ts
import { Component } from '@angular/core';
import { AccountService } from './account.service';
import { Observable } from 'rxjs';
import { IUser } from './models/user.model'; // 替换为你的IUser实际路径

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public user$: Observable<IUser | null>;

  constructor(private accountService: AccountService) {
    // 直接复用账号服务的user Observable
    this.user$ = this.accountService.user;
  }
}

3. 调整HTML模板的显示逻辑 #

未登录时user$会返回null，通过*ngIf判断用户是否存在，优化显示文本：

<span class="navbar-text" style="color:#fff">
  <ng-container *ngIf="user$ | async as user">
    <p>欢迎 {{ user.fullName }}</p>
  </ng-container>
</span>

修改后效果：

• 页面初始化时自动读取localStorage中的用户信息（若存在）并显示
• 登录成功后，账号服务的userSubject推送新值，组件user$自动更新，HTML通过async管道实时刷新显示
• 未登录时顶部栏为空，符合需求

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