更新绑定对象的内容时不会触发 onChanges

Question

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

子组件

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

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

父组件.html

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

父组件

 export class ParentComponent  {
localData: any;

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

如果我更改绑定对象的引用，则它会反映，但如果我更新对象中的特定值，则不会反映。

Answer 1

这就是 Angular 的变化检测的工作原理。如果对象引用没有改变，那么绑定的子组件将不会onChanges调用它的方法。您将需要更新参考。例子：

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