我创建了一个自定义加载屏幕，其中Angular组件（带有SVG动画的全屏DIV）显示在所有其他HTML上方。我的问题是调用加载屏幕。目前，我在全球服务中有一个布尔值，其中包含＆＃34; _isLoading＆＃34;变量。设置为true时，将显示加载屏幕（反之亦然），如下所示：
<app-loading-screen *ngIf="dataService._isLoading"></app-loading-screen>
<div id="pageWrapper">
<app-childcomponent></app-childcomponent>
</div>
默认情况下，＆＃39; _isLoading＆＃39;变量设置为＆＃39; true＆＃39;在初始应用程序加载时显示加载屏幕。儿童组件＆＃39;设置＆＃39; _isLoading＆＃39;变量为＆＃39; false＆＃39;曾经有过一次访问。已被调用，因为子组件的HTML随后被加载。这会抛出一个“ExpressionChangedAfterItHasBeenCheckedError”。我已经阅读了In-Depth Blog Post错误，我明白这个问题是由于子组件更改了一个变量而发生的，该变量刚刚检查了父组件中的摘要周期。我不知道的是如何解决这个问题。我假设其他人之前已经创建了载入画面......这样做的标准/规范是什么？
答案 0 :(得分：2)
ngAfterViewInit正是让您遇到麻烦的原因。在使用绑定到它的所有值更新视图后，将其称为。所以，此时你真的不应该更改绑定中使用的任何数据。这也意味着避免此错误非常简单：您只需等待另一个更改检测周期即可。最简单的解决方案是设置超时：
ngAfterViewInit() {
setTimeout(() => {
dataservice._isLoading = false;
});
}
但实际上，我不会从两个不同的地方实现这个标志的设置。原因是启动某些操作的组件承担更新该操作状态的责任。否则你最终会猜测＆＃34;哪个组件刚刚杀死了这个请求？＆＃34;。