在Angular 11中,可以使用ChangeDetectionStrategy.OnPush更改变化检测策略,以便在组件级别上对DOM更新进行优化。
例如,以下是一个组件,它在每个渲染循环中都调用一个函数:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `{{ expensiveCalculation() }}`
})
export class MyComponent {
expensiveCalculation() {
// Do something computationally expensive
return result;
}
}
要使用ChangeDetectionStrategy.OnPush策略,只需在组件装饰器上添加changeDetection属性即可。例如:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `{{ expensiveCalculation() }}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
expensiveCalculation() {
// Do something computationally expensive
return result;
}
}
这将告诉Angular只有在组件的输入属性发生更改时才重新渲染组件。如果没有更改,ngOnChanges()钩子将不会被调用,并且expensiveCalculation()函数也不会被调用。