javascript - 动态创建的组件在模型更改时未绑定(bind)到模型

Question

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

每次发出新值时，我都尝试在组件上运行更改检测。但仍然没有获得值(value)。

我已经在https://stackblitz.com/edit/angular-tyhfku 中重现了这个问题。 .

在上面的代码中，HelloComponent 是可重用组件，而 HeroComponent 是托管 HelloComponent 的动态组件(抱歉命名)。在 AppComponent 上，我有一个 onclick 方法，它在每次点击时发出新的值。您还可以更改 DOM 上每个项目的状态。但是我想在每个新值上恢复 HeroComponent 的状态，我试图在 Subscription 上完成但不起作用

Answer 1

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

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