角度动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

Posted 2023-02-22

【中文标题】角度动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

【英文标题】：Angular dynamic component loading - ExpressionChangedAfterItHasBeenCheckedError

【发布时间】：2017-10-10 14:31:42

【问题描述】：

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

我在网上找到了几个例子，包括 *** 和 angular.io 页面本身。

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

即使是此功能的专用示例也会引发相同的异常： Angular.io article Plunker

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'未定义'。当前值：'Bombasto'。看起来视图是在其父级及其子级经过脏检查后创建的。它是在变更检测钩子中创建的吗？

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

【问题讨论】：

这是新手错误:)。不要在它已经被选中之后手动改变它的状态。见***.com/q/34364880/573032

thx 伙计们，将看看它。 Rusev 解决了实际的错误

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error 详细解释了这种行为

【参考方案1】：

这是因为您正在更改 ngAfterViewInit 中的组件状态。请参阅 issue here 讨论该行为。

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

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

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

【讨论】：

非常感谢，这个问题已解决。没想到在这样一个关键功能上直接在 Angular 文档中出现错误

实际上这不是一个错误，而是一种预期的行为 - 非常烦人:)。

目前关于动态组件加载的官方示例包含错误angular.io/generated/live-examples/dynamic-component-loader/… - 此解决方案也适用于该错误

这篇文章展示了另一种使用微任务异步更新的方法：indepth.dev/…

【参考方案2】：

在更一般的情况下

使用

this._changeDetectionRef.detectChanges();

在更新到组件状态后期的方法结束时，

...不要忘记添加

private _changeDetectionRef : ChangeDetectorRef

作为拥有你的方法的组件的构造函数的参数。

见讨论here