Question

我正在尝试实现进度指示器组件，以显示通过异步管道呈现的模板组件的加载过程。

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

Answer 1

我认为您需要在呈现数据之前加载进度。 *ngIf="obs$ | async as obs; else loading"

Answer 2

使用 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在每个可观察对象上使用延迟，以模拟异步行为。

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

2 个答案: