Question

我正在将一个对象从父级传递给子级。在孩子我正在改变这个对象。现在，每当我在child中对这个对象进行更改时，它应该反映在父对象中。对于前者加载子组件时：

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

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

任何方式实现这一目标？感谢。

Answer 1

子组件需要@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)]="...."工作，输入和输出具有相同的基本名称（＆＃39;记录＆＃39;）并且输出具有后缀Change非常重要，否则您需要更长时间语法

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

（假设输出名为recordUpdated）

Answer 2

你是否用盒子语法尝试了香蕉：

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

Answer 3

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

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

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

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

3 个答案: