角度4 ExpressionChangedAfterItHaHasBeenCheckedError具有可觀察到的但不能保證

Question

當子組件通過共享服務在另一個組件中設置文本時，我遇到此錯誤。 當子組件在其onInit掛鈎中從Angular Translation服務預訂了Observable時，就會發生這種情況。 但是，如果我將可觀察對象更改為一個承諾對象（ .toPromise().then(..)不是.subscribe(..) ，則問題將消失。

我想知道為什么。

我的設定...

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));

}

要注意的另一件事是，這是SPA。 僅當通過javascript通過應用程序導航到view.component加載view.component時，才會顯示該錯誤。 如果在出現此問題的視圖上，並且我單擊了刷新，則不會發生該錯誤。

我已經在這里閱讀了有關此行為的一些信息： https : //blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

但是我仍然不明白為什么這個問題是由於Observable而不是諾言而發生的。

Answer 1

view.component.ts

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