angular - ngIf 中的异步管道仍然获得价值

Question

我想编写一个可折叠的组件，它有一个“展开”按钮，可以打开一个项目列表。这个列表是通过网络请求创建的，我想知道这个请求何时发生 - 因为据我了解，async管道就像一个订阅，并且ngIf会导致重新创建订阅的组件，我希望请求的值只有一次可用，但是每次我“显示”扩展器时都会创建它。

StackBlitz 最小示例

在我里面我AppComponent有这个逻辑：

  data$ = of('expensive data from server').pipe(
    take(1),
    tap(() => console.log('data from server emit!')),
    // shareReplay(1),
    finalize(() => console.log('complete!'))
  );
  showSon = true;

模板是这样的：

<button (click)="showSon=!showSon">Click me!</button>
<p *ngIf="showSon">
  <ng-container *ngIf="data$ | async as data">
    <div>{{data}}</div>
  </ng-container>
</p>

我的理解是，由于 observable 是通过 创建的of，因此它应该触发其值一次然后完成，并由控制台日志确认。然而，令我惊讶的是，每次ngIf我async在ReplaySubject.

我认为 usingshareReplay(1)可以解决发出多个 Web 请求的问题，但我仍然不明白，每当重新创建内部的模板时，一次性 observable 是如何重复可用的ngIf。

标签： angularrxjsrxjs-observables

Answer 1

MikeOne 的评论是正确的。Everytime the If is true, the element gets recreated.. so the async pipe re-subscribes to the data$ observable causing it to emit again..

您的解决方案也是正确的，可以shareReplay(1)按照您提到的那样使用。