Angular 变化检测及解决 Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has change

问题

最近遇到了一个问题：

最终在这里找到了解决方案：https://angular.io/errors/NG0100。

手动触发变更检测：

通过异步操作，触发变更检测：

总结：

变更检测

什么变化检测？

通过检测视图与状态之间的变化，在状态发生了变化后，帮助我们更新视图，这种将视图和我们的数据同步的机制就叫变化检测。

什么会触发变化检测？

异步操作会触发变化检测。比如：

• 点击事件(浏览器事件)被触发时。
• http 请求。
• 定时器：setInterval()、setTimeout()。
• Promise.resolve().then(() => {});。

生命周期钩子

精华

• 生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。
• 生命周期的开始：当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。
• 生命周期的结束：当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。

执行顺序

钩子	说明
ngOnChanges()	在 @Input()修饰的属性值发生变更时会触发该钩子的调用。否则不会调用。
ngOnInit()	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。肯定会调用且只会调用一次。
ngDoCheck()	自定义变更检测逻辑
ngAfterContentInit()	当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。响应内容中的变更
ngAfterContentChecked()	响应被投影内容的变更
ngAfterViewInit()	当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。响应视图变更
ngAfterViewChecked()
ngOnDestroy()

学习资源

Angular 变化检测详解
NG0100: Expression has changed after it was checked

https://blog.angular-university.io/angular-debugging/