Question

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

ChildComponent

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>

ParentComponent

 export class ParentComponent  {
localData: any;

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

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

Answer 1

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

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

Answer 2

按照我的说法，这行需要更改。

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

对此：

  @Input() data;

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

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

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

Answer 3

这是一个非常典型的问题陈述。使用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;
  }

}

如果可以，请告诉我。

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

3 个答案: