创建Angular4“正在加载”屏幕：ExpressionChangedAfterItHaHasBeenCheckedError

Question

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

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

默认情况下，“ _ isLoading”变量设置为“ true”，以在初始应用程序加载时显示加载屏幕。 一旦调用了“ ngAfterViewInit”，“子组件”会将“ _isLoading”变量设置为“假”，因为子组件的HTML随后已被加载。 这将引发“ ExpressionChangedAfterItHasBeenCheckedError”。 我已经阅读了有关该错误的深入博客文章 ，并且我了解到此问题的发生是由于子组件更改了刚刚检查了父组件中摘要循环的变量。 我不知道该如何解决。 我假设其他人之前已经创建了“加载屏幕” ...执行此操作的标准/规范是什么？

Answer 1

ngAfterViewInit正是给您带来麻烦的原因。 在视图绑定了所有值之后 ，将对其进行调用。 因此，目前您真的不应该更改绑定中使用的任何数据。 这也意味着避免该错误非常简单：您需要做的就是等待另一个变更检测周期。 最简单的解决方案是设置超时：

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

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