如何以声明式模式在不刷新页面的情况下读取Observable？

核心问题：AuthService 实例不唯一（最可能原因） #

登录时服务内的isAuthenticatedSubject.next(true)已执行，但AppComponent未收到更新，大概率是AppComponent和LoginComponent注入的AuthService不是同一个实例。登出正常是因为登出操作通常在根组件或同实例上下文执行，而登录在独立实例中修改Subject，根组件的订阅自然无法接收更新。

解决步骤： #

1. 确保AuthService为全局单例
   在AuthService的@Injectable装饰器中添加providedIn: 'root'，强制整个应用共享同一个服务实例：

   @Injectable({
     providedIn: 'root' // 关键：全局单例注入
   })
   export class AuthService {
     // ... 现有代码
   }
   

   同时移除其他模块/组件中手动声明providers: [AuthService]的代码，避免重复实例化。

次要问题排查：代码语法与逻辑修正 #

1. 修复signInWithEmailPassword的语法错误
   原代码中map与catchError之间缺少逗号，可能导致编译异常中断逻辑执行，同时建议返回响应值以便订阅者使用：

   signInWithEmailPassword(emailPasswordCredentials: EmailPasswordCredentials) {
     return this.httpClient
       .post<Response>(`${this.baseURL}/v1/auth/signin`, emailPasswordCredentials)
       .pipe(
         map((authResponse) => {
           this.setAuthenticatedStatus(true);
           return authResponse; // 可选：返回响应供订阅者处理
         }), // 补上缺失的逗号
         catchError((err) => throwError(() => err))
       );
   }
   

2. 确认AppComponent的订阅未被中断
   确保AppComponent中的isAuthenticated$始终指向AuthService的Observable，避免被意外重新赋值：

   // app.component.ts
   export class AppComponent {
     isAuthenticated$ = this.authService.isAuthenticated$.pipe(
       tap((status) => console.log('读取认证状态：', status)),
       catchError((err) => {
         console.error('认证状态订阅出错：', err);
         return EMPTY;
       })
     );
   
     constructor(private authService: AuthService) {} // 正确注入服务
   }
   

验证方法： #

• 登录后检查控制台，确认同时出现服务端的setting auth status... true和AppComponent的读取认证状态：true日志。
• 若仍未触发，使用Angular DevTools查看RxJS标签页，追踪isAuthenticated$的订阅者数量，确认AppComponent的订阅是否存在。

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