角动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

我需要在运行时动态创建多个组件的实例。角动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

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

但是在向组件模型赋值时总是收到异常ExpressionChangedAfterItHasBeenCheckedError。

即使该功能的专用例子抛出同样的异常： Angular.io article Plunker

Error错误：ExpressionChangedAfterItHasBeenCheckedError：它检查后表达发生了变化。先前的值：'未定义'。当前值：'Bombasto'。看起来这个视图是在它的父母及其子女被肮脏检查后创建的。它是否在变化检测钩子中创建？

我应该忽略这个还是应该修复？

来源

2017-05-11 Václav Mikeska

这是新手错误:)。在已经*检查*之后，不要手动更改组件的状态。请参阅http://stackoverflow.com/q/34364880/573032 –

thx球员，将看看它。 Rusev解决了实际的错误 –

[关于'ExpressionChangedAfterItHasBeenCheckedError'错误需要知道的一切]（https://medium.com/@maximus.koretskyi/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error -e3fd9ce7dbb4）很详细地解释了这种行为 –

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

在你的情况下，你可以移动最初的创建在ngOnInit。

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

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

来源

2017-05-11 14:25:46 rusev

非常感谢，解决了这个问题。没有预料到直接在Angular文档中发现这样的关键功能 –

其实这不是一个错误，而是一个预期的行为 - 非常恼人的:)。 – rusev

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

在更一般的情况下

使用

this._changeDetectionRef.detectChanges();

在那个那样更新到晚期组件状态的方法的结束时，

..不要忘记加

private _changeDetectionRef : ChangeDetectorRef

作为拥有您的方法的Component构造函数的参数。

查看discution here

来源

2017-11-05 20:19:57 user1767316

角动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

回答

相关问题