Angular RxJS 使用async管道时是否还需要添加takeUntil(this.destroy$)？

结论 #

如果你的boundObservable$仅在模板中通过async管道订阅，没有在组件类内手动调用subscribe，完全可以移除takeUntil(this.destroy$)，不会产生内存泄露。

原因说明 #

Angular 内置的async管道已经原生实现了自动取消订阅的逻辑：它会绑定所属组件的生命周期，当组件触发ngOnDestroy销毁时，会主动取消自己持有的所有async管道对应的 Observable 订阅，不需要开发者额外处理。

你给出的相关代码如下：
模板绑定逻辑：

<input name="SomeElement"
    [ngModel]="boundObservable$ | async">
</input>

组件逻辑：

export class MyComponent implements OnDestroy {
  destroy$: Subject<any> = new Subject<any>();

  boundObservable$ = this.sourceObservable$.pipe(
    takeUntil(this.destroy$), // 仅用async管道的话这行属于冗余逻辑
    map(this.transformData)
  );

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

你当前的使用场景下takeUntil没有额外作用，可以直接删除。

哪些情况需要保留takeUntil？ #

只有出现以下场景时，才需要额外加takeUntil做销毁控制：

• 同一个boundObservable$除了给模板async管道用，还在组件类里有手动subscribe的订阅，这部分手动订阅async管道无法管理，必须用takeUntil自动取消
• sourceObservable$是包含重逻辑的热 Observable（比如持续轮询、高频数据流计算），你希望在组件销毁前就可以主动终止上游数据流发射，减少不必要的性能消耗（这种场景加takeUntil是性能优化需求，不是防内存泄露需求）
• 你的 Observable 管道链中包含全局副作用操作（比如tap里注册了全局事件监听、定时器），需要确保组件销毁时无论订阅状态如何都终止这些副作用

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