Angular動態組件加載 - ExpressionChangedAfterItHasBeenCheckedError

Question

我需要在運行時動態創建多個組件的實例。

我在互聯網上找到了幾個例子，包括StackOverflow和angular.io頁面本身。

但是當我為組件模型賦值時，總是會收到異常ExpressionChangedAfterItHasBeenCheckedError。

即使是此功能的專用示例也會引發相同的異常： Angular.io文章 Plunker

錯誤：ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后發生了變化。 上一個值：'undefined'。 當前價值：'Bombasto'。 看起來這個視圖是在其父級及其子級被臟檢查后創建的。 它是在變更檢測鈎子中創建的嗎？

我應該忽略這個還是可以/應該修復？

Answer 1

這是因為您正在改變ngAfterViewInit組件狀態。 請參閱此處討論行為的問題 。

在您的情況下，您可以在ngOnInit移動初始創建。

 ngOnInit() {
    this.loadComponent();
    this.getAds();
 }

https://plnkr.co/edit/vAbkBIqrhpuuWadO4zGD?p=preview

Answer 2

在更一般的情況下

采用

this._changeDetectionRef.detectChanges();

在更新到組件狀態后期的方法的最后，

......別忘了補充

private _changeDetectionRef : ChangeDetectorRef

作為擁有您的方法的Component的構造函數的參數。

請參閱這里的討論