将数据推送到 input() 未被检测到：Angular 4

Question

我有一个父组件，其中包含一个名为“data”的对象，其中包含一些我想在 UI 上显示的数据。数据显示在一个表中，我创建了一个包含该表的子组件。所以在调用表格组件时，我将数据作为@Input() 传递。

//父组件模板

<display-data [data]='data'></display-data>

除了显示之外，我的父组件中有两个方法可以修改此数据属性。其中一个重新分配数据数组，如下所示：

setNewData() {
  this.data = this.response.content;
}

另一种方法将新数据推送到现有数据：

addNewData(newData: Array) {
  this.data.push(...newData);
}

因为我使用的是 Angular Input()，所以我假设每当我修改父组件中的数据对象（重新分配或添加更多数据）时，子组件中的数据属性将立即更新，并且我将在 UI 上看到新数据。这按预期工作。 但是，当我尝试查看 Angular 的生命周期钩子“ngOnChanges”时，我注意到它仅在发生重新分配时才被调用，而不是当我在数据对象中推送一些新数据时。

ngOnChanges 是这样工作的吗？因为我想在子组件的数据发生变化时调用一个方法。

Answer 1

是的，这正是 ngOnChanges 的工作原理。

ngOnChanges 仅在重新分配发生时才被调用。

如果您希望在此数据更改时执行方法，您可以执行以下操作。

1. 使用成员变量数据创建服务，以及返回此变量的函数。
2. 父组件可以使用此服务的方法来获取和更新此变量。
3. Service 还包含一个 Event Emitter 对象，可以被子组件订阅。
4. 因此，现在每当父组件调用服务方法来更新数据的值时，您都可以这样做并在 EventEmitter 对象上发出。

如果您需要某种代码，请告诉我。但是，如果您自己编写代码，您会明白很多。