从父组件到子组件的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）