ngOnchanges 和 DoCheck 角度

Posted

技术标签:

【中文标题】ngOnchanges 和 DoCheck 角度【英文标题】:ngOnchanges and DoCheck in angular 【发布时间】:2020-08-30 12:06:25 【问题描述】:

在研究 Angular 中 ngOnChanges 和 DoCheck 之间的区别时,我看到了一些我无法解释的东西,需要您的帮助。

基本上,我理解 ngOnChanges 无法识别数组或对象的变化,而 DoCheck 可以。我在这里创建了 stackblitz:https://stackblitz.com/edit/angular-ivy-sbyzya?file=src/app/app.component.html

在 app.component.html 中

如果你注释了第 2 行,那么只有 ngOnChanges 运行的组件,点击添加或编辑时数据没有排序。没错,因为OnChange检测不到数组@Input的变化。
<data-table-onchange [data]="numbers"></data-table-onchange>
<!-- <data-table-docheck [data]="numbers"></data-table-docheck> -->
如果您注释第 1 行,那么只有 DoCheck 运行的组件,点击添加或编辑时的数据排序。没错,因为DoCheck可以检测到数组@Input的变化。
<!--<data-table-onchange [data]="numbers"></data-table-onchange> -->
 <data-table-docheck [data]="numbers"></data-table-docheck>
但是如果你让两个子组件都运行,当点击添加或编辑时,两个子组件中的数据都会被排序。这对我来说似乎很奇怪,因为我不明白为什么 DataTableOnchangeComponent 可以运行排序功能。我在 ngOnChanges 中放了排序,点击添加或编辑时 ngOnChanges 没有触发,但不知何故数据仍然被排序。
<data-table-onchange [data]="numbers"></data-table-onchange>
<data-table-docheck [data]="numbers"></data-table-docheck>

【问题讨论】:

【参考方案1】:

两个表都对数字进行排序的原因,当您取消注释这两行时,是因为,当 DoCheck 启动排序时, numbers 数组实际上正在排序,它是 显示在两个组件中的相同数组javascript 的传递引用在起作用。

要查看差异,请尝试为这两个组件设置 2 个不同的数组,您应该会看到 OnChanges 组件中的数组没有排序。

<data-table-onchange [data]="numbers"></data-table-onchange>
<data-table-docheck [data]="numbers2"></data-table-docheck>

在 TS 中

public numbers: number[] = [5, 69, 9];
public numbers2: number[] = [5, 69, 9];

public add(): void 
  const random: number = Math.floor(Math.random() * 100);
  this.numbers.push(random);
  this.numbers2.push(random);

【讨论】:

谢谢,我完全忘记了通过引用:D

以上是关于ngOnchanges 和 DoCheck 角度的主要内容,如果未能解决你的问题,请参考以下文章

组件中的 DoCheck 确实检测到服务中的更改

AngularJS 1.6 + ES6 - $doCheck 被调用两次

Angular ngOnchanges 调用方法,但方法不调用服务或输出结果

ngOnChanges 挂钩中 SimpleChanges 接口的类型检查

Angular 2 动态组件加载 ngOnChanges 生命周期钩子调用

角度实际上是如何触发生命周期钩子的?