angular - 更新绑定(bind)对象的内容时不会触发 onChanges

Question

我在组件中有父子关系。如果我更新父组件中的值绑定(bind)对象，那么它必须在子组件中通知。

子组件

export class childComponent implements OnChanges {
@Input() data = { name: "Datta" };

ngOnChanges() {
  console.log('updated');
}

ParentComponent.html

<child-com [data]="localData"></child-com>
<button (click)="buttonClick()">changeData</button>

父组件

 export class ParentComponent  {
localData: any;

buttonClick() {
  this.localData.name = "sagar";
}

如果我更改绑定(bind)对象的引用，那么它会反射(reflect)，但如果我更新对象中的特定值，那么它不会反射(reflect)。

Answer 1

这就是 Angular 变更检测的工作原理。如果对象引用没有更改，则绑定(bind)的子组件将不会调用其 onChanges 方法。您将需要更新引用。示例:

this.localData = {
  ...this.localData,
  name: "sagar",
}