Ionic中如何监听Observable<boolean>值并在为true时执行代码

你可以通过订阅Observable并添加过滤逻辑实现需求，同时要注意避免内存泄漏：

步骤1：组件内订阅并过滤触发条件 #

在组件的ngOnInit生命周期钩子（比构造函数更适合初始化操作）里，对authenticationChange$进行订阅，用filter操作符只保留值为true的推送，然后执行目标方法：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  authenticationChange$: Observable<boolean>;
  private authSubscription?: Subscription;

  constructor(private authService: AuthService) {
    this.authenticationChange$ = this.authService.authenticationChange$;
  }

  ngOnInit(): void {
    // 仅在登录状态变为true时执行方法
    this.authSubscription = this.authenticationChange$
      .pipe(filter(isLoggedIn => isLoggedIn))
      .subscribe(() => {
        this.runCodeIfLogginedIn();
      });
  }

  runCodeIfLogginedIn(): void {
    // 你的业务逻辑代码
    console.log('用户已登录，执行对应操作');
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.authSubscription?.unsubscribe();
  }
}

步骤2：结合async管道的替代方案 #

如果你想复用已有的async管道，也可以在模板里通过ngIf条件触发方法，但要注意这种方式可能因变更检测导致方法重复执行：

<button *ngIf="!(authenticationChange$ | async)">登录</button>
<!-- 登出按钮，仅在登录状态为true时显示并触发方法 -->
<button *ngIf="authenticationChange$ | async as isLoggedIn" (click)="runCodeIfLogginedIn()">登出</button>

关键注意事项 #

• 务必清理订阅：组件销毁后如果不取消订阅，持续推送值的Observable会造成内存泄漏。除了上面手动管理Subscription的方式，也可以用takeUntil操作符批量处理多个订阅：

import { Subject, takeUntil } from 'rxjs';

private destroy$ = new Subject<void>();

ngOnInit(): void {
  this.authenticationChange$
    .pipe(
      filter(isLoggedIn => isLoggedIn),
      takeUntil(this.destroy$)
    )
    .subscribe(() => this.runCodeIfLogginedIn());
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

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