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的构造函数的参数。

请参阅这里的讨论