將局部變量值訂閱到 Angular 中另一個組件中的變量的 Observable

Question

我想基於局部變量通過*ngIf更改 HTML 視圖，該局部變量應根據通過共享服務的可觀察對象傳遞的變量進行更改。

HTML

<div class="login-container" *ngIf="!isAuthenticated">

TypeScript 相同組件：

export class LoginComponent implements OnInit {
  authenticationsSubscription;
  isAuthenticated: boolean;

  constructor(
    private authService: AuthServiceService,
    private router: Router,
    private route: ActivatedRoute){}

  getAuth(): Observable<boolean>{
    return this.authService.validation();
  }

  ngOnInit() {
    this.authenticationsSubscription = this.authService.validation().subscribe(auth => this.isAuthenticated = auth);
  }
} 

共享服務 AuthService 的AuthService ：

export class AuthServiceService {
  isAuthenticated: boolean;

  validation(): Observable<boolean>{
    return of(this.isAuthenticated);
  }
}

在調試時我發現，LoginComponent 中的變量isAuthenticated並沒有改變，而 AuthService 的變量isAuthenticated發生了變化。 我也嘗試使用pipe()和tap() ，這並沒有改變任何東西。

我究竟做錯了什么？

Answer 1

將您的AuthServiceService轉換為將身份驗證 state 作為BehaviorSubject並將其作為Observable返回，如下所述。

import { Observable, BehaviorSubject } from "rxjs";

export class AuthServiceService {
  private isAuthenticatedSub: BehaviorSubject<boolean> = new BehaviorSubject(false);

  set isAuthenticated(isAuthenticated: boolean) {
    this.isAuthenticatedSub.next(isAuthenticated);
  }

  get isAuthenticated(): boolean {
    return this.isAuthenticatedSub.value;
  }

  validation(): Observable<boolean> {
    return this.isAuthenticatedSub.asObservable();
  }
}

Answer 2

當組件初始化時觸發OnInit生命周期掛鈎時，您的 observable 的實際訂閱只會發生一次。

您可以訂閱BehaviorSubject以捕獲值更改。

Stackblitz 示例

身份驗證服務

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class AuthService {
  isAuthenticated: BehaviorSubject<boolean>;

  constructor() {
    this.isAuthenticated = new BehaviorSubject<boolean>(false);
   }
}

零件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  isAuthenticated: Observable<boolean>;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.isAuthenticated = this.authService.isAuthenticated;
  }

  login() {
    this.authService.isAuthenticated.next(true);
  }

  logout() {
    this.authService.isAuthenticated.next(false);
  }
}

模板

<div *ngIf="isAuthenticated | async; else notAuthenticated">
  User is authenticated
  </div>

  <ng-template #notAuthenticated>
  <div>User isn't authenticated</div>
  </ng-template>

  <button (click)="login()">Login</button>
  <button (click)="logout()">Logout</button>