angular2中从父组件到子组件的双向数据绑定答案

【问题标题】：two way data binding in angular2 from parent component to child componentangular2中从父组件到子组件的双向数据绑定
【发布时间】：2016-10-15 03:30:06
【问题描述】：

我正在将一个对象从父级传递给子级。在孩子中，我正在对这个对象进行更改。现在，每当我在孩子中对这个对象进行更改时，它应该反映在父母身上。例如。加载子组件时：

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

现在当我改变孩子的记录时。我希望它反映在父母身上。

有什么方法可以做到这一点？谢谢。

【问题讨论】：

标签： data-binding angular

【解决方案1】：

你有没有尝试过盒子语法中的香蕉：

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

【讨论】：

【解决方案2】：

子组件需要@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）

【讨论】：

您能否提供有关具有相同基本名称和后缀Change 的此信息的来源？
文档中提到了它。这部分是几周前添加的。对不起，只在电话里。我猜它在模板语法或双向绑定附近的某个地方提到过。

【解决方案3】：

如果您没有在孩子中重新分配 record - 即，您没有做类似 this.record = newRecord; 的事情 - 那么您所拥有的应该可以正常工作。

由于您将 JavaScript 引用类型（对象）传递给子对象，因此您对子对象的属性所做的任何更改（例如，this.record.property1 = someNewValue;）都会被父对象“看到”，因为parent 和 child 引用了相同的 record 对象。只有一个record 对象正在被操作。

如果您在子级中重新分配record（或者如果record 是原始类型，例如整数、字符串或布尔值），请参阅@Günter 的答案。在这种情况下，涉及到多个record 对象，因此您必须在孩子开始使用新对象时告诉父级。

【讨论】：