[英]Angular Loading Spinner Error:ExpressionChangedAfterItHasBeenCheckedError
I did a loading-spinner component in my Angular app. 我在Angular应用中做了一个loading-spinner组件。 I placed it in the app component next to the router-outlet with *ngIf="isLoading" so i could make it visible from everywhere in the application.
我将它放在带有* ngIf =“ isLoading”的路由器出口旁边的应用程序组件中,以便可以在应用程序中的任何位置看到它。
'isLoading' boolean is being updated globally using ngrx's Store. 正在使用ngrx的Store在全球范围内更新'isLoading'布尔值。
Now i've got an error saying 现在我有一个错误说
Error:ExpressionChangedAfterItHasBeenCheckedError: Expression had changed after it was checked.
错误:ExpressionChangedAfterItHasBeenCheckedError:检查表达式后,表达式已更改。 Previous value: 'ngIf: true'.
先前的值:'ngIf:true'。 Current value: 'ngIf: false'
当前值:'ngIf:false'
I've been reading about this error and the conclusion was: Don't change parameter value from deeper child components. 我一直在阅读有关此错误的信息,结论是:不要从更深的子组件中更改参数值。
So how can make a loading-spinner without duplicate the code in my app and without causing a change detection error? 那么,如何在不重复应用程序代码的情况下又不会导致更改检测错误的情况下使加载旋转程序呢?
If you change the variable inside constructor or ngOnInit
, this can happen. 如果在构造函数或
ngOnInit
更改变量,则可能会发生这种情况。 You can use a timeout to overcome this. 您可以使用超时来解决此问题。
ngOnInit() {
setTimeout(() => {
this.yourVar = 'new value'
});
}
Check following for more information 检查以下更多信息
https://github.com/angular/material2/issues/11357 https://github.com/angular/material2/issues/11357
https://github.com/angular/angular/issues/17572 https://github.com/angular/angular/issues/17572
You could try to use ngAfterContentInit life cycle hook, with a setTimeout set to 0. 您可以尝试使用ngAfterContentInit生命周期挂钩,并将setTimeout设置为0。
example: 例:
ngAfterContentInit() {
setTimeout(() => console.log('Place what you want here'), 0);
}
Don't forget export class implements AfterContentInit and Import from '@angular/core'. 不要忘记导出类实现AfterContentInit和从'@ angular / core'导入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.