动态创建的组件在模型更改时未绑定到模型

时间:2019-05-16 17:03:57

标签: javascript angular angular7

我的目标是向动态创建的组件的item $属性发出新值,将组件状态恢复为存储在对象中的默认状态。但是很明显,组件并没有承担模型更改。

每次发送新值时,我都尝试在组件上运行更改检测。但是仍然无法获得价值。

我在https://stackblitz.com/edit/angular-tyhfku中重现了该问题。

在上面的代码中,HelloComponent是可重用的组件,而HeroComponent是托管HelloComponent的动态组件(对不起命名)。在AppComponent上,我有一个onclick方法,每次单击都会发出新值。您也可以更改DOM上每个项目的状态。但是我想在每个新值上恢复要在Subscription上完成但无法正常工作的HeroComponent的状态

1 个答案:

答案 0 :(得分:0)

这与动态创建的组件无关-尝试将其更改为标准方式,仍然会遇到相同的问题。它涉及如何将简单的值传递给section / hello组件,如何更改它们以及Angular中的更改检测机制。在更改SectionComponent中的值之后,从HeroComponent的角度来看,什么都没有真正改变,SectionComponents的输入值是相同的。尝试向SectionComponent添加另一个简单的数字Input属性,在HeroComponent中进行更改,您会发现onChanges可以正常工作: https://stackblitz.com/edit/angular-za4mkd

我现在不想要实现什么,所以我不能告诉您正确的编码方式,但是也许您应该考虑使用Control Value Accessor(如果这必须是某种形式的复选框?)。 另外,您还应该记住,对于对象(如数据结构),只有在更改引用后Angular才会看到更改(您可以使用Spread运算符创建数据结构的新实例)。