ngIf 内的异步管道仍然有价值

Question

我想编写一个可折叠组件，它有一个“展开”按钮，可以打开项目列表。 此列表是通过 Web 请求创建的，我想知道此请求何时发生 - 因为据我了解， 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创建of ，它应该触发它的值一次然后完成，由控制台日志确认。 然而，令我惊讶的是，每次我在ngIf显示元素时，即使async现在订阅了一个不是ReplaySubject的完整可观察ngIf ，我仍然得到一个值。

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

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) 。