问题
最近遇到了一个问题:
最终在这里找到了解决方案: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/