Angular2-ChangeDetector

JavaScript 评论

Angular 6 数据发生变化视图不更新

场景

// 首先将任务添加至异步队列
setTimeout(() => {
// 异步队列中加 promise
new Promise()…

}, 0)

此时 resolve 方法中修改数据，发现视图没有更新。

原因

猜测可能是因为异步队列 + 异步 Request 请求脱离了 ngZone 的执行范围

解决方法

注入 CDK

1
2
3
4
5
6
constructor( private cdf: ChangeDetectorRef) {    }
...
...

this.cdf.markForCheck(); //它能标记整颗组件树的目录直到下一次变化监测的执行
this.cdf.detectChanges(); // 主要是这句，对当前组件及其子组件都运行检测。即使组件是否检测状态是关闭的，也会运行检测。

数据修改后调用 detectChanges(); 强制触发标记处的数据更新

detectChanges 有点类似 angular1 中的 $apply

缺点

在设置了 detectChanges() 后， 所有的数据变化都需要手动触发。

参考资料

https://www.jianshu.com/p/09c9d937920b