創建Angular4「加載」屏幕：ExpressionChangedAfterItHasBeenCheckedError

我創建了一個自定義加載屏幕，其中一個Angular組件（帶SVG動畫的全屏DIV）顯示在所有其他HTML之上。我的問題是調用加載屏幕。目前，我在全局服務中使用了「_isLoading」變量的布爾值。當設置爲真，則顯示加載屏幕（並且反之亦然），如下所示：創建Angular4「加載」屏幕：ExpressionChangedAfterItHasBeenCheckedError

<app-loading-screen *ngIf="dataService._isLoading"></app-loading-screen> 
<div id="pageWrapper"> 
    <app-childcomponent></app-childcomponent> 
</div>

默認情況下，「_isLoading」變量設置爲「真」，以顯示在初始應用負載加載屏幕。一旦調用了「ngAfterViewInit」，'childcomponent'將'_isLoading'變量設置爲'false'，因爲子組件中的HTML已經被加載。這會拋出一個'ExpressionChangedAfterItHasBeenCheckedError'。我已閱讀錯誤In-Depth Blog Post，並且我明白，由於子組件更改父組件中摘要循環剛剛檢查的變量，因此發生此問題。我不知道的是如何解決這個問題。我假設其他人已經在...之前創建了加載屏幕...這樣做的標準/規範是什麼？

來源

2017-10-19 fila

我提出了一個類似的問題的解決方案：https://stackoverflow.com/questions/46837438/angular2-expressionchangedafterithasbeencheckederror –

我從來沒有遇到過這個錯誤，因爲我反過來這樣做。我在開始時將其設置爲false，然後在加載函數時（例如訂閱observable並檢索數據時）將其標記爲true，然後在完成時將其設置爲false。 –

閱讀文章[你需要知道的關於'ExpressionChangedAfterItHasBeenCheckedError'錯誤的所有信息]（https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbabecheckederror-error-e3fd9ce7dbb4） –

ngAfterViewInit正是給你帶來麻煩。它被稱爲視圖已更新與所有值綁定到它。所以，在這一刻，你真的不應該改變綁定中使用的任何數據。這也意味着避免這個錯誤非常簡單：您只需要等待另一個更改檢測週期。最簡單的辦法是設置超時時間：

ngAfterViewInit() { 
    setTimeout(() => { 
     dataservice._isLoading = false; 
    }); 
}

但實際上，我也不會從兩個不同的地方實施該標誌的設置。原因在於啓動某個操作的組件負責更新該操作的狀態。否則，你最終會猜測「哪個組件剛剛殺死了這個請求？」。

來源

2017-10-20 00:10:15

我打算給這個方法一個鏡頭，但你是對的。我將重新設計它，以便只在相同的組件內切換標誌。 – fila

這解決了我的問題。這是因爲我在AfterViewInit中調用它。我已經改變了現在我切換HTML的方式，並且只在同一個組件中打開/關閉它......再也沒有問題了。感謝Alexander！ – fila

創建Angular4「加載」屏幕：ExpressionChangedAfterItHasBeenCheckedError

回答

相關問題