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在處理模板驅動的表單時還起到了額外的作用，但是對於您的用例而言，這不是問題。）