角度根据条件将不同的可观察值分配给异步的模板（有内存泄漏吗？）

Question

我需要根据某个标志渲染来自不同 ngrx 存储的数据。两个存储都提供相同类型的数据。

方法一

<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
    <ng-container *ngIf="store1$ | async as store1">
        <div>{{ store1?.prop1 }}</div>
        <div>{{ store1?.prop2 }}</div>
    </ng-container>
</ng-contaier>
<ng-template #anotherStoreData>
    <ng-container *ngIf="store2$ | async as store2">
        <div>{{ store2?.prop1 }}</div>
        <div>{{ store2?.prop2 }}</div>
    </ng-container>
</ng-template>

flag$: Observable<boolean>
store1$: Observable<Store>
store2$: Observable<Store>
ngInit() {
    flag$ = streamService.userNewStore();
    store1$ = this.store.select(<someselector1>);
    store2$ = this.store.select(<someselector2>);
}

方法2

<ng-container *ngIf="store$ | async as store">
    <div>{{ store?.prop1 }}</div>
    <div>{{ store?.prop2 }}</div>
</ng-container>


store$: Observable<Store>
ngInit() {
    streamService.userNewStore()
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe((flag) => {
        store$ = flag ? this.store.select(<someselector1>) : this.store.select(<someselector2>);
    });
}

在方法 1 中，我正在复制模板，这对于小模板来说很好 - 但如果它很大，那么我正在考虑方法 2。

在 Approach2 中，streamService 可以随时更改标志，在这种情况下，使用异步管道的模板中的先前订阅将会发生什么情况。会导致内存泄漏吗？

还有其他我可以使用的替代方案吗，请建议。

Answer 1

刚刚检查了 Async 管道的源代码，如果 Observable 发生变化，它似乎会取消订阅。

您可以在文件的第 100 行中看到这一点：

if (obj !== this._obj) {
  this._dispose();
  return this.transform(obj as any);
}

如果传入的值不是内存中当前保存的值，则会调用this.dispose，从而取消订阅。

考虑到这一点，我肯定更喜欢第二种方法