本文摘自PHP中文网,作者青灯夜游,侵删。
相关教程推荐:《angular教程》
问题现象
在开发过程中,遇到前台页面数据不更新的问题。前台页面中采用了插值表达式绑定后台数据字段,在后台调用接口成功后会修改数据字段,但此时前台页面没有自动更新。如下文代码所示,就是很基础的插值表达式的使用,并无特别之处。
1 |
|
1 2 3 4 5 6 |
|
问题原因
这个问题涉及到Angular的一个特性――变化检测(Change Detection)。所用的框架是ABP框架,框架自动生成的页面中,添加了changeDetection
这条属性。这条属性指明了当前组件的变化检测策略是OnPush
。
1 2 3 4 5 6 |
|
关于变化检测策略,有两种:
Default:
Default
策略是默认策略,只要有值发生变化,就对组件及其子孙组件进行检查。OnPush:
OnPush
策略是只有当输入数据(@Input
)的引用发生变化或者有事件触发时,组件才进行变化检测。这种策略检查不彻底,但效率高。
解放方案
- 方案一,直接删掉这条属性赋值
- 方案二,手动进行变化检测
方案一很简单,就是直接删掉组件中这条变化检测策略的赋值语句。这样组件将采用默认策略,缺点就是效率变低了。
方案二就是在调用接口成功后,手动调用变化检测机制的触发函数。这里要用到变化检测对象。
首先引入变化检测的模块
1 |
|
然后声明变化检测对象
1 |
|
在接口调用成功后调用变化检测方法
1 2 3 4 5 6 7 |
|
有点手动调用C#的垃圾回收机制的味道。
参考资料:
https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010928087
https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Flskzj%2Fp%2F11143233.html
更多编程相关知识,请访问:编程教学!!
以上就是了解Angular中的变化检测(Change Detection)机制的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《Angular》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者