如何创建Observable？Angular登录状态Observable订阅失效问题求助

Hey there! I see exactly what's going wrong here. Let's break it down and fix it step by step.

The Root Problem #

Your current approach replaces the userSignedIn$ Observable entirely every time the user logs in or out. When your component subscribes to userSignedIn$ in ngOnInit, it's only listening to the first Observable instance you created (Rx.Observable.of(false)). Any new Observables you assign later don't notify the existing subscription—those are brand new streams that no one is listening to yet.

The Solution: Use a BehaviorSubject #

Instead of replacing the Observable, you need a way to emit new values on the same stream so all existing subscriptions get notified. That's where RxJS BehaviorSubject comes in handy: it holds the current value and emits it to new subscribers immediately, plus it lets you push new values to all existing subscribers.

Updated Service Code #

Here's how to refactor your UserManagementService:

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { UserSigninInfo } from './your-user-types-file'; // Adjust import path to match your project

@Injectable({ providedIn: 'root' })
export class UserManagementService {
  // Private BehaviorSubject to hold the current auth state (encapsulated to prevent external misuse)
  private _userSignedIn$ = new BehaviorSubject<boolean>(false);
  // Public Observable for components to subscribe to (safe, can't call next() on it directly)
  userSignedIn$: Observable<boolean> = this._userSignedIn$.asObservable();

  constructor(
    private http: HttpClient,
    private bs: WebToBackendInterfaceService
  ) {}

  onUserSignout() {
    console.log("In UserManagementService: onUserSignout");
    return this.bs.onUserSignout().subscribe((res) => {
      console.log("response from server", res);
      // Emit false to update all subscribed components
      this._userSignedIn$.next(false);
    });
  }

  signinUser(user: UserSigninInfo) {
    return this.bs.signinUser(user).subscribe((res: HttpResponse<any>) => {
      console.log('response from server:', res);
      console.log('response headers', res.headers.keys());
      // Emit true to update all subscribed components
      this._userSignedIn$.next(true);
    });
  }
}

Updated Component Code #

Even better, you can use Angular's async pipe to handle subscriptions automatically (no need to manually subscribe/unsubscribe, which prevents memory leaks):

Component Class

import { Component } from '@angular/core';
import { UserManagementService } from './user-management.service';

@Component({
  selector: 'app-component-c',
  templateUrl: './component-c.component.html'
})
export class ComponentC {
  // Expose the Observable directly to the template
  userSignedIn$ = this.userManagementService.userSignedIn$;

  constructor(private userManagementService: UserManagementService) {}
}

Component Template

<ng-container *ngIf="!(userSignedIn$ | async)">
  <!-- Content to show when user is NOT logged in -->
</ng-container>

<ng-container *ngIf="userSignedIn$ | async">
  <!-- Content to show when user IS logged in -->
</ng-container>

Key Takeaways #

• Never replace an Observable that's already subscribed to: Use a Subject/BehaviorSubject to emit new values on the same stream instead of creating new Observables.
• Use BehaviorSubject for state with a default value: It ensures new subscribers get the latest state immediately, which is perfect for auth status.
• Prefer the async pipe: It handles subscription cleanup automatically, reducing boilerplate and preventing memory leaks.
• Encapsulate your Subject: Keep the BehaviorSubject private and expose a public Observable with asObservable() to prevent external code from emitting values directly (enforces proper state management).

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