從父組件到子組件的angular2中的雙向數據綁定

Question

我將一個對象從父項傳遞給子項。 在小孩我正在對此對象進行更改。 現在，無論什麼時候我在孩子身上改變這個物體，它都應該反映在父母身上。 例如。 同時加載子組件：

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

現在，當我在child.I改變記錄想讓它在父反映。

任何方式來實現這一目標？ 謝謝。

Answer 1

如果您沒有在孩子–即重新分配record，你是不是做一些像this.record = newRecord; –那麼你有什麼應該工作的罰款。

因爲你是通過一個JavaScript引用類型（的對象）孩子，所做的任何更改到–例如，this.record.property1 = someNewValue; –會「看到」物體在孩子的屬性由父，因爲這兩個父和孩子有相同的record對象的引用。只有一個正在操作的record對象。

如果您要在子項中重新分配record（或者如果record是一個基本類型，例如整數，字符串或布爾值），請參閱@Günter的答案。在這種情況下，涉及多個record對象，所以當孩子開始使用新對象時，必須告訴父對象。

Answer 2

您是否嘗試過在框中語法香蕉：

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

Answer 3

子組件需要一個@Input()和@Output()爲雙向綁定工作

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

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

對於[(record)]="...."工作是非常重要的輸入和輸出具有相同的基本名稱（'記錄'）並且輸出具有後綴Change否則您需要更長的語法

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

（假設輸出被命名爲recordUpdated）