角度加载微调框错误：ExpressionChangedAfterItHaHasBeenCheckedError

Question

我在Angular应用中做了一个loading-spinner组件。 我将它放在带有* ngIf =“ isLoading”的路由器出口旁边的应用程序组件中，以便可以在应用程序中的任何位置看到它。
正在使用ngrx的Store在全球范围内更新'isLoading'布尔值。
现在我有一个错误说

错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。 先前的值：'ngIf：true'。 当前值：'ngIf：false'

我一直在阅读有关此错误的信息，结论是：不要从更深的子组件中更改参数值。
那么，如何在不重复应用程序代码的情况下又不会导致更改检测错误的情况下使加载旋转程序呢？

Answer 1

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

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

检查以下更多信息

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

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

Answer 2

您可以尝试使用ngAfterContentInit生命周期挂钩，并将setTimeout设置为0。

例：

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

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