角度加载微调框错误:ExpressionChangedAfterItHaHasBeenCheckedError

时间:2018-07-30 08:36:53

标签: angular typescript angular2-changedetection

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

时出错
  

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

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

2 个答案:

答案 0 :(得分:0)

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

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

检查以下内容以获取更多信息

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

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

答案 1 :(得分:0)

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

示例:

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

别忘了导出类实现AfterContentInit和从“ @ angular / core”导入。