Angular 动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

Question

我需要在运行时动态创建多个组件的实例。

我在互联网上找到了几个示例，包括 StackOverflow 和 angular.io 页面本身。

但是当我为组件模型赋值时总是收到异常 ExpressionChangedAfterItHasBeenCheckedError。

即使是此功能的专用示例也会抛出相同的异常: Angular.io article Plunker

错误错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。先前的值:“未定义”。当前值:'Bombasto'。看起来该 View 是在其父项及其子项经过脏检查后创建的。它是在变更检测 Hook 中创建的吗？

我应该忽略它还是可以/应该修复它？

Answer 1

这是因为您要在 ngAfterViewInit 中更改组件状态。查看issue here讨论行为。

在您的情况下，您可以在 ngOnInit 中移动初始创建。

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

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