Angular 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在處理模板驅動的表單時也有其他用途，但對於您的用例，這不是問題）。