角度加載微調框錯誤：ExpressionChangedAfterItHaHasBeenCheckedError

Question

我在Angular應用中做了一個loading-spinner組件。 我將它放在帶有* ngIf =“ isLoading”的路由器出口旁邊的應用程序組件中，以便可以在應用程序中的任何位置看到它。
正在使用ngrx的Store在全球范圍內更新'isLoading'布爾值。
現在我有一個錯誤說

錯誤：ExpressionChangedAfterItHasBeenCheckedError：檢查表達式后，表達式已更改。 先前的值：'ngIf：true'。 當前值：'ngIf：false'

我一直在閱讀有關此錯誤的信息，結論是：不要從更深的子組件中更改參數值。
那么，如何在不重復應用程序代碼的情況下又不會導致更改檢測錯誤的情況下使加載旋轉程序呢？

Answer 1

如果在構造函數或ngOnInit更改變量，則可能會發生這種情況。 您可以使用超時來解決此問題。

ngOnInit() {
    setTimeout(() => {
        this.yourVar = 'new value'
    });
}

檢查以下更多信息

https://github.com/angular/material2/issues/11357

https://github.com/angular/angular/issues/17572

Answer 2

您可以嘗試使用ngAfterContentInit生命周期掛鈎，並將setTimeout設置為0。

例：

  ngAfterContentInit() {
    setTimeout(() => console.log('Place what you want here'), 0);
  }

不要忘記導出類實現AfterContentInit和從'@ angular / core'導入。