Angular - 知道模板渲染何时完成 - 使用异步管道

Question

我正在尝试实现一个进度计组件来显示使用异步管道渲染的模板组件的加载过程。

问题是我如何知道给定组件的渲染(使用异步管道)已完成。

Answer 1

使用forkJoin rxjs 运算符将可观察源包装在一起。当收到最后一个值时，您将收到响应:

forkObservable$ = forkJoin({
    obs1: this.observable1$,
    obs2: this.observable2$,
    obs3: this.observable3$,
  });

通过这种方式，您可以显示仪表，直到收到最后一个发出的值(仪表是示例中显示的简单值:

<ng-container *ngIf="forkObservable$ | async as forkObservable; else loading">
 <app-comp1>{{forkObservable.obs1}}</app-comp1>
 <app-comp2>{{forkObservable.obs2}}</app-comp2>
 <app-comp3>{{forkObservable.obs3}}</app-comp3>
</ng-container>

<ng-template #loading>
  loading {{dataLoaded}} / 3
</ng-template>

要更新仪表的值(或示例中的“dataLoaded”)，您可以在每个可观察量上使用 tap rxjs 运算符来更新其值:

observable1$ = of('CyberTruck').pipe(
    tap(() => this.dataLoaded++)
  );

Here is a working example with Stackblitz在每个可观察量上使用延迟来模拟异步行为。