data-binding - Angular2中从父组件到子组件的两种方式数据绑定(bind)

Question

我正在将一个对象从父级传递给子级。在 child 中，我正在对该对象进行更改。现在，每当我在子对象中更改此对象时，它都应该反射(reflect)在父对象中。对于前。加载子组件时:

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

现在，当我更改子项中的记录时。我希望它反射(reflect)在父项中。

有什么办法可以实现这个目标吗？谢谢。

Answer 1

子组件需要 @Input() 和 @Output() 才能进行双向绑定(bind)

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

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

要使 [(record)]="...." 正常工作，输入和输出具有相同的基本名称(“record”)并且输出具有后缀 更改，否则您将需要更长的语法

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

(假设输出名为 recordUpdated)