Angular 2如何为2级孩子实现双向绑定？

Question

对象是父组件

的属性

const public object = {value1: 'test1'};

它被用作子组件的属性

<app-child [(obj)]="object"></app-child>

子组件本身有另一个将value1字段作为属性的子项

<app-child-2 [(value)]="obj.value1"></app-child-2>

问题是，我可以将[(value)]用于第二个孩子，或者我可以设置从父母到第二个孩子的双向约束的唯一方式是

<app-child-2 [value]="obj.value1" (valueChange)="updateObjectFun()"></app-child-2>

其中updateObjectFun将设置发出objectChange输出。

Answer 1

如果您的子组件具有正确的“接口”，则可以使用双向绑定语法。因此，例如，如果您的第二个子组件具有value的输入绑定和valueChange的输出绑定，那么您可以使用双向绑定语法：[(value)]="obj.value1"。

双向绑定语法完全等同于：

[value]="obj.value1" (valueChange)="obj.value1=$event"

其中$event是从组件的valueChange输出属性发出的对象。如果您可以控制组件的接口（即您可以创建所需的任何属性），那么可以随意使用双向绑定语法。

ngModel仅在您无法控制要绑定的组件的接口的情况下才有必要，因此不能使用双向绑定语法快捷方式。

（上述陈述并非完全正确，因为在处理模板驱动的表单时，ngModel也有额外用途，但对于您的用例，这不是问题。）