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

【问题标题】：angular - know when template rendering is finished - with async pipe角度 - 知道模板渲染何时完成 - 使用异步管道
【发布时间】：2020-05-24 00:46:45
【问题描述】：

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

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

【问题讨论】：

你可以尝试使用我认为的组件生命周期钩子。
angular.io/guide/lifecycle-hooks 这些对你有帮助吗？
我尝试了生命周期，结果ngAfterViewInit 在异步管道返回之前被触发
你需要知道模板还是组件？
@GérômeGrignon 我需要知道模板中所有组件的信息，以便更新加载进度表

标签： angular asynchronous

【解决方案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++)
  );

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

【讨论】：

给你一个大拇指！但是仍然不完全是我想要的。我需要在相应的异步管道完成后立即渲染组件。您的解决方案禁用所有组件，直到所有管道完成。
您的意思是仪表只是一个 ui，而不是作为加载指示器的组件的占位符？如果是这样，只需使用 tap 运算符使用我答案的最后一部分，并使用 ngIf 将每个 observable 放置在每个组件上。加载数据时，将渲染组件并更新仪表计数器。

【解决方案2】：

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

【讨论】：

不，这不是我想要的。假设我在模板中有三个组件，它们都有异步管道，那么我将用 3 初始化一个加载进度表，对于每个组件的异步管道完成，我将进度加 1，直到所有三个组件加载完成，即 3 of 3 完成