親コンポーネントから子コンポーネントへのangular2の双方向データバインディング

Question

親から子にオブジェクトを渡しています。 子供の私はこのオブジェクトに変更を加えています。 これで、子でこのオブジェクトを変更するときはいつでも、親に反映されるはずです。 例：子コンポーネントのロード中に ：

<child [record]="record"></child> 

を私はchild.I内のレコードを変更していたときに今、それは親に反映したいと思います。

これを達成する方法はありますか？ありがとう。

Answer 1

あなたは子供–でrecordを再割り当てされていない場合、すなわち、あなたが正常に動作する必要があります持っているもの、その後this.record = newRecord; –のようなものをやっていません。

は、あなたが子供にJavaScriptの参照型（オブジェクト）を渡しているので、すべての変更は、あなたは親のために、両方の親によって–例えば、this.record.property1 = someNewValue; –は「見」される子内のオブジェクトのプロパティに加えます子は同じrecordオブジェクトへの参照を持っています。操作中のオブジェクトは1つしかありません。

子にrecordを再割り当てする場合（またはrecordが整数、文字列、ブール値などのプリミティブタイプであった場合）、@Günterの答えを参照してください。この場合、複数のオブジェクトが含まれているので、子が新しいオブジェクトの使用を開始するときに親に通知する必要があります。

Answer 2

あなたはボックス構文でバナナを試してみました：

<child [(record)]="record"></child> 

Answer 3

を子コンポーネントは、それを仕事に[(record)]="...."について

@Component({ 
    selector: 'child', 
    ... 
}) 
export component MyChild { 
    @Input() record; 
    @Output() recordChange = new EventEmitter(); 

    updateRecord(newRecord) { 
    this.record = newRecord; 
    this.recordChange.emit(this.record); 
    } 
} 

を動作するように結合双方向のための@Input()と@Output()を必要とすることが重要です入力と出力が同じベース名（ 'record'）を持ち、出力に接尾辞Changeがある場合は、より長い構文が必要です

[record]="..." (recordUpdated)="..." 

（出力がrecordUpdated命名されたと仮定した場合）