Angular使用BehaviorSubject实现按钮点击切换内容显隐功能异常求助

问题根因 #

当前代码存在两处错误导致无法实现切换效果：

• 模板中直接判断content$ Observable对象本身：Observable实例本身是真值，所以*ngIf="content$"永远返回true，无法响应数据流的布尔值变化
• showHide方法永远推送true值，没有对当前的布尔值做取反切换操作

修复步骤 #

1. 修改TS逻辑，实现布尔值切换 #

showHide方法需要先获取content$的当前值，取反后再推送：

import { BehaviorSubject } from 'rxjs';

// 类内部代码
readonly content$ = new BehaviorSubject<boolean>(false);

showHide(): void {
  // 取当前值取反后推送
  this.content$.next(!this.content$.value);
}

2. 修改HTML模板，添加async管道处理Observable #

async管道会自动订阅Observable并返回最新的流值，同时会在组件销毁时自动取消订阅，避免内存泄漏：

<button (click)="showHide()">
    {{ (content$ | async) ? 'Hide'  : 'Show'  }}
</button>
<div *ngIf="content$ | async" >
    CONTENT
</div>

可选优化 #

如果需要减少重复的async管道调用，可以结合*ngIf的别名语法：

<ng-container *ngIf="content$ | async as isShow">
  <button (click)="showHide()">
      {{ isShow ? 'Hide'  : 'Show'  }}
  </button>
  <div *ngIf="isShow" >
      CONTENT
  </div>
</ng-container>

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