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

Posted 2023-02-22

【中文标题】更新绑定对象的内容时不会触发 onChanges

【英文标题】：The onChanges isn't fired when updating the content of a bound object

【发布时间】：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";

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

【问题讨论】：

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

【参考方案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",

【讨论】：

有没有其他方法可以在不更改引用的情况下获得子组件的更改？

没有。更改检测是有效的，因为它依赖于对象引用已更改或未更改的事实。它不需要遍历整个对象来查看某个属性是否发生了变化。