двухсторонняя привязка данных в 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)