Angular 加载旋转器错误：ExpressionChangedAfterItHasBeenCheckedError

Question

我在我的Angular应用中创建了一个加载动画组件。我将它放在应用程序组件旁边的路由出口上，使用*ngIf="isLoading"使其在应用程序的任何地方都可见。
'isLoading'布尔值是使用ngrx的Store在全局更新的。
现在我遇到了一个错误，提示：

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。之前的值为：“ngIf：true”。当前值为：“ngIf：false”

我一直在阅读这个错误，得出的结论是：不要从更深的子组件更改参数值。
那么，如何制作一个加载动画组件，既不会在我的应用程序中重复代码，也不会引起变更检测错误？

- SteveBl

---

请提供一个 [mcve] 来重现问题。 - user4676340

一个快速的解决方法是使用 ChangeDetectorRef 并调用 detectChanges。 - David

Answer 1

如果你在构造函数或ngOnInit中更改变量，就会发生这种情况。你可以使用超时来解决这个问题。

ngOnInit() {
    setTimeout(() => {
        this.yourVar = 'new value'
    });
}

更多信息请参考以下内容

https://github.com/angular/material2/issues/11357

https://github.com/angular/angular/issues/17572

- Lahiru Chandima

Answer 2

你可以尝试使用ngAfterContentInit生命周期钩子，并设置一个setTimeout为0。

例如：

  ngAfterContentInit() {
    setTimeout(() => console.log('Place what you want here'), 0);
  }

不要忘记导出类实现AfterContentInit并从'@angular/core'导入。

- Cod3n0d3