angular 根据条件（是否有内存泄漏？）使用异步将不同的可观察对象分配给模板

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>);
}

方法二

<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 发生变化，它将取消订阅。

您可以在 line 100 of the file 中看到：

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

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

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

Answer 2

您可以使用 conditional operator 中的 flag$ observable 来确定数据源：

<ng-container *ngIf="((flag$ | async) ? store1$ : store2$) | async as store">
  <div>{{ store?.prop1 }}</div>
  <div>{{ store?.prop2 }}</div>
</ng-container>

有关演示，请参阅 this stackblitz。

angular 根据条件（是否有内存泄漏？）使用异步将不同的可观察对象分配给模板

angular assign different observable to template with async based on condition (any memory leak ?)

javascript

ngrx

angular

angular-observable

ngrx-store-4.0