angular 中的 ngOnchanges 和 DoCheck
ngOnchanges and DoCheck in angular
在研究 Angular 中 ngOnChanges 和 DoCheck 的区别时,我看到了一些无法解释的问题,需要您的帮助。
基本上,我明白ngOnChanges 不能识别数组或对象的变化而DoCheck 可以。我在这里创建了 stackblitz:https://stackblitz.com/edit/angular-ivy-sbyzya?file=src/app/app.component.html
在app.component.html
- 如果您注释第 2 行,那么只有组件 which ngOnChanges 运行,点击添加或编辑时数据没有排序。没错,因为OnChange无法检测到数组@Input的变化。
<data-table-onchange [data]="numbers"></data-table-onchange>
<!-- <data-table-docheck [data]="numbers"></data-table-docheck> -->
- 如果注释第 1 行,那么只有组件 which 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>
两个表都对数字进行排序的原因,当您取消注释这两行时,是因为当 DoCheck 启动排序时,numbers 数组实际上正在排序,并且它是显示在两个组件中的相同数组。 Javascript's 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);
}
在研究 Angular 中 ngOnChanges 和 DoCheck 的区别时,我看到了一些无法解释的问题,需要您的帮助。
基本上,我明白ngOnChanges 不能识别数组或对象的变化而DoCheck 可以。我在这里创建了 stackblitz:https://stackblitz.com/edit/angular-ivy-sbyzya?file=src/app/app.component.html
在app.component.html
- 如果您注释第 2 行,那么只有组件 which ngOnChanges 运行,点击添加或编辑时数据没有排序。没错,因为OnChange无法检测到数组@Input的变化。
<data-table-onchange [data]="numbers"></data-table-onchange>
<!-- <data-table-docheck [data]="numbers"></data-table-docheck> -->
- 如果注释第 1 行,那么只有组件 which 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>
两个表都对数字进行排序的原因,当您取消注释这两行时,是因为当 DoCheck 启动排序时,numbers 数组实际上正在排序,并且它是显示在两个组件中的相同数组。 Javascript's 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);
}