Angular模板中Async Pipe调用返回长生命周期Observable的方法的疑问

1. 模板重渲染时，getData()会被再次调用吗？ #

会。Angular在执行变更检测时，会重新计算模板中所有绑定表达式的值，包括直接调用的方法（比如getData()）。只要变更检测触发（比如otherVariable或anotherVariable更新），getData()就会被执行一次。

2. AsyncPipe会取消旧Observable订阅并订阅新的吗？ #

会。根据你引用的AsyncPipe说明：当表达式引用变更时，它会自动取消旧订阅并订阅新的Observable/Promise。由于每次getData()都会返回一个全新的Observable实例，AsyncPipe会判定表达式引用发生了变化，因此会执行取消旧订阅、订阅新流的操作。

3. 这种用法合理吗？ #

非常不合理，主要存在以下问题：

• 性能损耗：每次变更检测都要创建新的Observable实例、执行订阅/取消订阅操作，额外的开销会降低组件性能，尤其是在频繁触发变更检测的场景下。
• 不必要的数据流触发：ngrx store的select操作会被重复触发，map中的数据转换逻辑也会多次执行，如果转换逻辑包含副作用（比如异步操作、状态修改），很可能引发不符合预期的行为。
• 冗余的取消订阅逻辑：AsyncPipe本身会在组件销毁时自动取消订阅，你代码中的takeUntil(this.destroyed$)属于冗余逻辑，甚至可能和AsyncPipe的自动取消逻辑产生冲突。

正确的用法 #

应该在组件初始化时提前创建好Observable并赋值给类属性，模板中直接绑定该属性：

// 组件类
data$: Observable<any>;

ngOnInit(): void {
  this.data$ = this.ngRxStore.pipe(
    select(dataRx.getData),
    map(data => {
      // 执行数据转换逻辑
      return value;
    })
  );
}

<!-- 模板 -->
<div>{{ otherVariable }}</div>
<div>{{ data$ | async }}</div>
<span>{{ anotherVairable }}</span>

这种方式下，Observable只会被创建一次，AsyncPipe也只会订阅一次，变更检测时仅读取属性值，性能更优，逻辑也更清晰。

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