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 在处理模板驱动的表单时还有一个额外的用途，但对于您的用例，这不是问题）。