angular - ngOnchanges 和 DoCheck 角度

Question

在研究 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>

标签： angularangular-lifecycle-hooksngonchangesangular2-docheck

Answer 1

当您取消注释这两行时，两个表都对数字进行排序的原因是，当 DoCheck 启动排序时， 数字数组实际上正在排序，并且它是两个组件中显示的相同数组。Javascript 的 Pass By Reference 正在发挥作用。

要查看差异，请尝试为这两个组件设置 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);
}