Angular-加载程序出现控制台错误但工作正常

Question

我正在尝试为我的角度组件设置一个应用程序加载器。一切正常，但在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来勾选服务中的更改，但出现了递归错误。