Angular14引入了变化检测策略更改导致expressionchangedafteithasbeenchecked错误的问题
在 Angular 中，变化检测是指在应用初始加载后，检测并响应组件和绑定属性值的变化。在 Angular 14 中，引入了一种新的变化检测策略，即 OnPush 策略。该策略可提高性能，因为它只有在组件输入值发生更改时才会运行变化检测。
然而，当我们在使用 OnPush 策略时，并且在组件的模板中使用了异步操作（例如 setTimeout 或者 Promise），可能会触发 expressionchangedafteithasbeenchecked 错误。这是因为在模板中的绑定属性与组件中的属性不同步。
要解决此问题，可以使用 ChangeDetectorRef 中的 markForCheck() 方法标记组件需要更新。例如：
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-example',
template: ,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {
myTitle = 'Original Title';
constructor(private cdr: ChangeDetectorRef) {}
ngOnInit() { setTimeout(() => { this.myTitle = 'New Title'; this.cdr.markForCheck(); // 添加此行代码以标记需要更新 }, 1000); } }
在此示例中，组件 ExampleComponent 的 changeDetection 策略设置为 OnPush，并且在 ngOnInit 钩子中使用了一个异步操作。当异步操作完成后，我们使用 cdr.markForCheck() 方法标记组件需要更新。这样，在下一次变化检测时，Angular 将同步模板中的绑定属性与组件中的属性。