创建 Angular4“加载”屏幕：ExpressionChangedAfterItHasBeenCheckedError

Question

我创建了一个自定义加载屏幕，其中一个 Angular 组件（带有 SVG 动画的全屏 DIV）显示在所有其他 HTML 之上。我的问题是调用加载屏幕。目前，我在全局服务中有一个带有“_isLoading”变量的布尔值。设置为 true 时，会显示加载屏幕（反之亦然），如下所示：

<app-loading-screen *ngIf="dataService._isLoading"></app-loading-screen>
<div id="pageWrapper">
    <app-childcomponent></app-childcomponent>
</div>

默认情况下，“_isLoading”变量设置为“true”以在初始应用程序加载时显示加载屏幕。一旦调用了“ngAfterViewInit”，“childcomponent”就会将“_isLoading”变量设置为“false”，因为随后加载了来自子组件的HTML。这会引发“ExpressionChangedAfterItHasBeenCheckedError”。我已经阅读了关于错误的In-Depth Blog Post，并且我知道这个问题是由于子组件更改了父组件中的摘要循环刚刚检查的变量而发生的。我不知道如何解决这个问题。我假设其他人之前已经创建了加载屏幕......这样做的标准/规范是什么？

Answer 1

ngAfterViewInit 正是给您带来麻烦的原因。它被称为 在 视图已更新所有绑定到它的值。因此，此时您真的不应该更改绑定中使用的任何数据。这也意味着避免此错误非常简单：您需要做的只是等待另一个更改检测周期。最简单的解决方案是设置超时：

ngAfterViewInit() {
    setTimeout(() => {
        dataservice._isLoading = false;
    });
}

但实际上，我不会从两个不同的地方设置此标志。原因是启动某些操作的组件承担了更新该操作状态的责任。否则你最终会猜测“哪个组件刚刚杀死了这个请求？”。