javascript - 为什么 ngOnChanges() 在 @Input() 更新数据 Angular 8 时不会触发？

Question

parent.component.html

<parent-comp [data]="mydata"> </parent-comp>

父组件.ts

this.service.abc$
        .takeUntil(this.ngUnsubscribe.asObservable())
        .subscribe((data: myType[]) => {
            this.mydata= data;
        });

子组件.ts

@Input data;

下课我有下面的代码

public ngOnChanges() { if (this.data) { console.log(this.data); } }

现在我希望每当我在 @Input data 中收到从父组件到子组件的最新数据时，我的 ngOnChanges 函数应该触发并在控制台中打印数据。

但不幸的是，ngOnChanges 函数没有再次触发。仅在组件初始化时触发一次

如果有人需要更多详细信息，请告诉我!

谢谢!

Answer 1

鉴于缺乏进一步的信息，我会做出一个有根据的猜测，@Input data 是一个数组或一个对象。

根据 docs , ngOnChanges 是:

A lifecycle hook that is called when any data-bound property of adirective changes.

但它没有说明如何应该更改该属性。一般来说，只有当对属性的引用发生更改时才会触发 Hook 。

考虑以下例子。

父组件 Controller

mydata = [];

updateMyData(value: any) {
  this.mydata.push(value);
}

父组件模板

<app-child [data]="mydata"></app-child>

子组件 Controller

@Input() data: any;

ngOnChanges(changes: SimpleChanges) {
  console.log(changes);
}

现在您希望每次在父组件中调用 updateMyData() 函数时都会触发 ngOnChanges。但是对变量 mydata 的引用永远不会改变。所以钩子(Hook)不会被触发。有多种方法可以强制更改检测器触发 Hook 。

方法一:将 @Input 装饰器绑定(bind)到 setter 而不是直接绑定(bind)到变量。在 answer 中讨论已经。

方法二:使用扩展语法重新分配父组件中的变量。

父组件 Controller

mydata = [];

updateMyData(value: any) {
  this.mydata = [...this.mydata, value];
}

您也可以对对象使用相同的方法。