我正在尝试为我的角度组件设置一个应用程序加载器。一切正常,但在console.log
中出现此错误ExpressionChangedAfterItHasBeenCheckedError:表达式已更改 经过检查。先前的值:“ true”。当前值:“ false” 。
该错误仅发生在子组件上,而不发生在主要组件上,例如,在我的应用程序组件中,我初始化了一些服务(这不会引发任何错误)。
this.stateService.appLoading = true;
await Promise.all([
this.authService.listenForAuthStateChanges(),
this.activityService.initialize(),
this.ecoService.initialize(), // start the eco service
this.newsService.initialise(),
this.trainingService.initialize(),
this.cartService.initialize(),
this.routerService.initialize(),
this.careerService.initialise(),
this.aboutService.initialize(),
]).then(() => {
this.stateService.appLoading = false;
})
在我的子组件中(以下导致控制台错误,但加载器正常工作
async ngOnInit() {
this.stateService.componentLoading = true;
this.initializeData().then(() => {
this.stateService.componentLoading = false;
});
}
和布局component.ts中,我隐藏并显示了加载器,如下所示:
get loading$() {
return combineLatest(
this.stateService.appLoading$,
this.stateService.componentLoading$,
(appLoading, componentLoading) => (appLoading || componentLoading)
)
}
-在html中
<app-preloader *ngIf="loading$ | async"></app-preloader>
我真的不明白怎么了。我尝试调用应用程序ref来勾选服务中的更改,但出现了递归错误。