Question

我是Angular的新手，只是一个关于ngOnChanges的问题。我知道ngOnChanges()方法采用一个参数（包含来自“ @ angular / core的SimpleChange”），我们可以将最新的更改值检索为：

import { Directive, ElementRef, Input, SimpleChange } from "@angular/core";
...
@Input("pa-attr")
bgClass: string;


ngOnChanges(changes: { [property: string]: SimpleChange }) {
    let change = changes["bgClass"];
    console.log(change.currentValue);
}

但是ngOnChanges实际上会更新输入属性bgClass吗？还是只获取最新的更改值而已？

Answer 1

ngOnChanges是一个挂钩，当装饰器@Input定义的值将被更新时调用。在ngOnChanges内部，您已经可以从中读取实际值。{YOUR_INPUT_NAME}

官方文档-https://angular.io/api/core/OnChanges和https://angular.io/guide/lifecycle-hooks

您不需要ngOnChanges来更新@Input定义的值，它们将由组件的父组件更新。 ngOnChanges仅允许您检测更改并根据需要使用更新的数据执行某些逻辑。

Answer 2

ngOnChanges 是生命周期的钩子，当Input（）在引用更改时调用。

这里要指出的是，简单数据类型是不可变的，因此每次更改值引用时都会更新并调用ngOnchanges并进行比较

但是在对象和复杂数据类型为Angular进行浅比较的情况下，它不会检查深度级别的EVery值，因此，即使更改了父级的输入值，它也不会调用 ngOnChanges 孩子

在更改检测期间，当Angular检查组件的输入属性是否更改时，它（基本上）使用===进行脏检查。对于数组，这意味着（仅）对数组引用进行了脏检查。由于rawLapsData数组引用未更改，因此不会调用ngOnChanges（）。

我可以想到两种可能的解决方案：

实施ngDoCheck（）并执行您自己的更改检测逻辑以确定阵列内容是否已更改。（“生命周期挂钩”文档中有一个示例。）

每当对数组内容进行任何更改时，将一个新数组分配给rawLapsData。然后将调用ngOnChanges（），因为数组（引用）将作为更改出现。

在回答中，您想出了另一种解决方案。

在OP上重复一些评论：

我仍然看不到如何圈数变化（确定它必须使用与ngOnChanges（）本身等效的东西？）而地图却不能。

在laps组件中，您的代码/模板在lapsData数组中的每个条目上循环，并显示内容，因此在显示的每条数据上都有Angular绑定。
即使Angular没有检测到对组件输入属性的任何更改（使用===检查），它仍然（默认情况下）仍然对所有模板绑定进行脏检查。当这些更改中的任何一个更改时，Angular将更新DOM。那就是您所看到的。
maps组件的模板中可能没有与lapsData输入属性的绑定，对吗？那将解释差异。请注意，两个组件中的lapsData和父组件中的rawLapsData都指向同一/一个数组。因此，即使Angular没有注意到对lapsData输入属性的任何（引用）更改，组件“获取” /查看任何数组内容也会更改，因为它们都共享/引用该数组。我们不需要Angular来传播这些更改，就像我们使用原始类型（字符串，数字，布尔值）一样。但是对于原始类型，对值的任何更改都将始终触发ngOnChanges（），这是您在答案/解决方案中所利用的。

您可能已经发现，对象输入属性的行为与数组输入属性相同。

ngOnChanges是否更新输入属性？

2 个答案: