简介
默认情况下，Angular 2+ 会在应用程序中的每次变化时对所有组件（从上到下）执行变更检测。变化可以来自用户事件或者从网络请求接收到的数据。
变更检测非常高效，但随着应用程序变得更加复杂并且组件数量增加，变更检测将不得不执行越来越多的工作。
其中一个解决方案是为特定组件使用 OnPush 变更检测策略。这将指示 Angular 仅在向这些组件及其子树传递新引用时才运行变更检测，而不是在数据发生变化时运行变更检测。
在本文中，您将学习关于 ChangeDetectionStrategy 和 ChangeDetectorRef。
先决条件
如果您想跟随本文，您需要：
- 一些熟悉 Angular 组件可能会有所帮助。
- 本文还涉及 RxJS 库，熟悉
BehaviorSubject和Observable也可能会有所帮助。
探索 ChangeDetectionStrategy 示例
让我们来看一个带有子组件的示例组件，该子组件显示水生生物列表，并允许用户向列表中添加新的生物：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
aquaticCreatures = ['shark', 'dolphin', 'octopus'];
addAquaticCreature(newAquaticCreature) {
this.aquaticCreatures.push(newAquaticCreature);
}
}
模板如下：
<input #inputAquaticCreature type="text" placeholder="Enter a new creature">
<button (click)="addAquaticCreature(inputAquaticCreature.value)">Add creature</button>
<app-child [data]="aquaticCreatures"></app-child>
app-child 组件如下：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
@Input() data: string[];
}
app-child 模板如下：
<ul>
<li *ngFor="let item of data">{{ item }}</li>
</ul>
编译并在浏览器中访问应用程序后，您应该看到一个无序列表，其中包含 shark、dolphin 和 octopus。
在输入框中输入水生生物名称，然后单击 Add creature 按钮将新生物添加到列表中。
当 Angular 检测到父组件中的数据发生变化时，子组件将会更新。
现在，让我们将子组件的变更检测策略设置为 OnPush：
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
@Input() data: string[];
}
重新编译并在浏览器中访问应用程序后，您应该看到一个无序列表，其中包含 shark、dolphin 和 octopus。
然而，添加新的水生生物似乎不会将其追加到无序列表中。新数据仍然被推送到父组件的 aquaticCreatures 数组中，但 Angular 并未识别到数据输入的新引用，因此它不会对组件运行变更检测。
要向数据输入传递新引用，您可以在 addAquaticCreature 中使用 spread syntax (...) 替换 Array.push：
// ...
addAquaticCreature(newAquaticCreature) {
this.aquaticCreatures = [...this.aquaticCreatures, newAquaticCreature];
}
// ...
使用这种变化后，您不再对 aquaticCreatures 数组进行突变。您将返回一个全新的数组。
重新编译后，您应该观察到应用程序的行为与之前相同。Angular 检测到了对 data 的新引用，因此它对子组件运行了变更检测。
这就完成了修改示例父子组件以使用 OnPush 变更检测策略。
探索 ChangeDetectorRef 示例
在使用 OnPush 变更检测策略时，除了确保每次应该发生变化时都传递新引用之外，您还可以利用 ChangeDetectorRef 来完全控制。
ChangeDetectorRef.detectChanges()
例如，您可以继续对数据进行突变，然后在子组件中添加一个带有 Refresh 按钮的按钮。
这将需要将 addAquaticCreature 恢复为使用 Array.push：
// ...
addAquaticCreature(newAquaticCreature) {
this.aquaticCreatures.push(newAquaticCreature);
}
// ...
并添加一个触发 refresh() 的 button 元素：
<ul>
<li *ngFor="let item of data">{{ item }}</li>
</ul>
<button (click)="refresh()">Refresh</button>
然后，修改子组件以使用 ChangeDetectorRef：
import {
Component,
Input,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
@Input() data: string[];
constructor(private cd: ChangeDetectorRef) {}
refresh() {
this.cd.detectChanges();
}
}
重新编译并在浏览器中访问应用程序后，您应该看到一个无序列表，其中包含 shark、dolphin 和 octopus。
向数组添加新项不会更新无序列表。但是，单击 Refresh 按钮将会对组件运行变更检测，并进行更新。
ChangeDetectorRef.markForCheck()
假设你的数据输入实际上是一个 observable。
这个例子将使用 RxJS 的 BehaviorSubject：
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
aquaticCreatures = new BehaviorSubject(['shark', 'dolphin', 'octopus']);
addAcquaticCreature((newAquaticCreature) {
this.aquaticCreatures.next(newAquaticCreature);
}
}
并且你在子组件的 OnInit 钩子中订阅它。
你将在这里将水生生物添加到 aquaticCreatures 数组中：
import {
Component,
Input,
ChangeDetectionStrategy,
ChangeDetectorRef,
OnInit
} from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
@Input() data: Observable<any>;
aquaticCreatures: string[] = [];
constructor(private cd: ChangeDetectorRef) {}
ngOnInit() {
this.data.subscribe(newAquaticCreature => {
this.aquaticCreatures = [...this.aquaticCreatures, ...newAquaticCreature];
});
}
}
这段代码不完整，因为新数据会改变 data observable，所以 Angular 不会运行变更检测。解决方案是在订阅 observable 时调用 ChangeDetectorRef 的 markForCheck：
// ...
ngOnInit() {
this.data.subscribe(newAquaticCreature => {
this.aquaticCreatures = [...this.aquaticCreatures, ...newAquaticCreature];
this.cd.markForCheck();
});
}
// ...
markForCheck 指示 Angular 当特定输入发生变化时应触发变更检测。
ChangeDetectorRef.detach() 和 ChangeDetectorRef.reattach()
使用 ChangeDetectorRef 还可以完全手动分离和重新附加变更检测，通过 detach 和 reattach 方法。文章来源：https://www.toymoban.com/news/detail-830064.html
结论
在本文中，你了解了 ChangeDetectionStrategy 和 ChangeDetectorRef。默认情况下，Angular 将对所有组件执行变更检测。ChangeDetectionStrategy 和 ChangeDetectorRef 可以应用于组件，以在新引用与数据发生变化时执行变更检测。文章来源地址https://www.toymoban.com/news/detail-830064.html
到了这里，关于如何在 Angular 中使用变更检测策略的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
