角2レベル2の子供の双方向バインディングを実装する方法は？

Question

オブジェクトは、親コンポーネント

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

の財産であり、それは、子コンポーネントのプロパティとして使用されます

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

子コンポーネント自体がようvalue1フィールドを取り、他の子供を持っていますプロパティ

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

質問です、私は2番目の子供のための[(value)]を使用するか、私は二親から子へ結合双方向に設定することができますどのように唯一の方法は、updateObjectFunが設定されます

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

をis'tすることができますオブジェクトの変更を出力します。

Answer 1

子コンポーネントに正しい「インターフェース」がある場合は、双方向バインディング構文を使用できます。たとえば、2番目の子コンポーネントの入力バインディングがvalueで、出力バインディングがvalueChangeの場合、双方向バインディング構文：[(value)]="obj.value1"を使用できます。

双方向結合構文は、完全に同等である：$eventは、コンポーネントのとvalueChange出力プロパティから出射されたオブジェクトである

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

。コンポーネントのインターフェイスを制御できる場合（つまり、必要なプロパティを作成できます）、双方向バインディング構文を自由に利用できます。

ngModelは、バインドするコンポーネントのインターフェイスを制御できないため、双方向バインディング構文のショートカットを使用できない場合にのみ必要です。

（上記のステートメントは完全ではありません。なぜなら、ngModelはテンプレートドリブンフォームを扱う際に余分な目的を果たしますが、使用上の問題ではありません）。