angular - 知道模板渲染何時完成 - 使用異步 pipe

Question

我正在嘗試實現一個進度表組件來顯示模板組件的加載過程，這些模板組件是使用異步 pipe 呈現的。

問題是我如何知道給定組件的渲染（使用異步管道）已完成。

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”），您可以在每個 observable 上使用tap rxjs 運算符以更新其值：

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

這是 Stackblitz 的一個工作示例，它在每個 observable 上使用延遲來模擬異步行為。

Answer 2

我假設您需要在數據呈現之前加載進度。 *ngIf="obs$ | async as obs; else loading"