提交表单后BehaviorSubject值未在Header组件同步显示问题排查

我在loginService服务中定义了一个BehaviorSubject类型的字段isLogged：

public isLogged = new BehaviorSubject<boolean>(!!localStorage.getItem('authToken'));

在login.component组件提交表单时，onSubmit()方法会将isLogged的值改为true：

public onSubmit() {
  if (this.user.valid) {
    this.loginService.isLogged.next(true);
  }
}

我希望在header.component.html中显示isLogged的值，使用了async管道，但提交表单后该组件中isLogged的值并未发生变化：

<div (click)="loginBtnClick()" routerLink="login"> 
  <span>{{loginService.isLogged | async}}</span>
</div>

请问哪里操作出错了？

问题原因及解决方案 #

1. 服务未保持单例（最可能的原因）

如果LoginService不是单例模式，login.component和header.component会注入不同的服务实例。登录组件更新的是自身实例的isLogged，而头部组件监听的是另一个实例的数据流，因此视图不会同步变化。

解决方法：
确保服务通过根注入器注册为单例，在服务的@Injectable装饰器中添加providedIn: 'root'：

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  public isLogged = new BehaviorSubject<boolean>(!!localStorage.getItem('authToken'));
  // 其他服务逻辑
}

注意：不要在任何组件的providers数组中声明LoginService，否则会创建局部实例覆盖单例。

2. 头部组件未正确暴露服务给模板

检查header.component.ts中是否正确注入服务，并且将服务声明为public属性（模板只能访问组件的公共属性）：

export class HeaderComponent {
  constructor(public loginService: LoginService) {}
}

3. 额外优化：登录成功后同步更新localStorage

虽然这不是视图不更新的直接原因，但登录成功后应将authToken存入localStorage，确保页面刷新后isLogged的初始值正确：

public onSubmit() {
  if (this.user.valid) {
    // 登录请求成功后，将token存入localStorage
    localStorage.setItem('authToken', '获取到的token值');
    this.loginService.isLogged.next(true);
  }
}

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