角度4 ExpressionChangedAfterItHaHasBeenCheckedError具有可观察到的但不能保证

Question

I am experiencing this error when a child component sets text in another component through a shared service. This happens when the child component subscribes to an Observable from the Angular Translation service in its onInit hook. However, if I change the observable to a promise ( .toPromise().then(..) over .subscribe(..) , the problem vanishes.

I would like to understand why.

My setup...

root.component.html:

<app-page-title>{{ 'STRINGS.loading' | translate }}</app-page-title>
<div>
  <!-- view component rendered here -->
  <router-outlet (activate)='onActivate($event)'></router-outlet>
</div>

page-title.service.ts:

getPageTitle() {
  return this.pageTitle;
}
setPageTitle(pageTitle: string) {
  this.pageTitle = pageTitle;
}

page-title.component.html:

<div>
  <div *ngIf="isBack()">
    <div class="page-title-text">
     {{getPageTitle()}}
    </div>
  ...
  </div>
</div>

view.component.ts:

ngOnInit() {
  // Triggers ExpressionChangedAfterItHasBeenCheckedError 
  this.translationService.get('VIEW.title').subscribe(pageTitle => this.titleService.setPageTitle(pageTitle));

  // Works
  // this.translationService.get('VIEW.title').toPromise().then(pageTitle => this.titleService.setPageTitle(pageTitle));

}

One other thing to note is, this is a SPA. The error only shows up when loading the view.component through javascript by navigating to it through the app. If on the view where this problem presents itself, and I hit refresh, the error does not occur.

I've read a little bit about this behavior here: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

but I still do not understand why this problem is occurring specifically with an Observable, but not a promise.

Answer 1

view.component.ts

ngOnInit() {
   this.translationService.get('VIEW.title').subscribe(pageTitle => 
     setTimeout(() => {
       this.titleService.setPageTitle(pageTitle);
     }, 0);
   );
}