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

【问题标题】：The onChanges isn't fired when updating the content of a bound object更新绑定对象的内容时不会触发 onChanges
【发布时间】：2019-01-28 21:08:50
【问题描述】：

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

子组件

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";
}

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

【问题讨论】：

能分享一下父子组件和视图文件的完整代码吗？

标签： angular angular5 angular-directive

【解决方案1】：

这是一个非常典型的 Angular 问题陈述。使用 Getter/Setter 进行属性绑定，可以在 setter 方法中检测到变化。

export class childComponent {

  data: any = { name: "Datta" };

  get name(): any {
    return this.data;
  }

  @Input("data")
  set name(name: any) {
    this.data = name;
  }

}

如果可行，请告诉我。

【讨论】：

谢谢KunalMZ .....我的场景有点不同，我在一些过滤的基础上在子组件中显示值。所以我想要更新值后的事件。据我所知，当实际对象改变或者我们可以说引用改变时，会调用“set”函数。所以 getter 和 setter 在我的情况下不起作用。

【解决方案2】：

在我看来，这条线需要改变。

@Input() data = { name: "Datta" };

到这里：

  @Input() data;

因为在这里您正在更改对象的引用。

如果您需要在子组件中更改数据对象的名称，请在 ngOnInit 中调用它，如下所示：

ngOnInit() {
this.data.name = "Datta";
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

有没有其他方法可以在不更改引用的情况下获得子组件的更改？
没有。更改检测是有效的，因为它依赖于对象引用已更改或未更改的事实。它不需要遍历整个对象来查看某个属性是否发生了变化。