189 8069 5689

了解Angular中的变化检测（ChangeDetection）机制

相关教程推荐：《angular教程》

十余年的敦化网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整敦化建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“敦化网站设计”,“敦化网站推广”以来，每个客户项目都认真落实执行。
问题现象

在开发过程中，遇到前台页面数据不更新的问题。前台页面中采用了插值表达式绑定后台数据字段，在后台调用接口成功后会修改数据字段，但此时前台页面没有自动更新。如下文代码所示，就是很基础的插值表达式的使用，并无特别之处。

{{sumDataDto.thirdAll}}
this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
        }
      });
问题原因

这个问题涉及到Angular的一个特性——变化检测（Change Detection）。所用的框架是ABP框架，框架自动生成的页面中，添加了changeDetection这条属性。这条属性指明了当前组件的变化检测策略是OnPush。

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [appModuleAnimation()],
  changeDetection:ChangeDetectionStrategy.OnPush
})

关于变化检测策略，有两种：

Default：Default策略是默认策略，只要有值发生变化，就对组件及其子孙组件进行检查。

OnPush：OnPush策略是只有当输入数据（@Input）的引用发生变化或者有事件触发时，组件才进行变化检测。这种策略检查不彻底，但效率高。

解放方案方案一，直接删掉这条属性赋值方案二，手动进行变化检测

方案一很简单，就是直接删掉组件中这条变化检测策略的赋值语句。这样组件将采用默认策略，缺点就是效率变低了。

方案二就是在调用接口成功后，手动调用变化检测机制的触发函数。这里要用到变化检测对象。
首先引入变化检测的模块

import { ChangeDetectorRef } from “angular”;

然后声明变化检测对象

constructor(private changeDetection:ChangeDetectorRef) {}

在接口调用成功后调用变化检测方法

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
          this.changeDetection.detectChanges();
        }
      });

有点手动调用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中的变化检测（ChangeDetection）机制
路径分享：http://cdxtjz.cn/article/cpgcis.html

其他资讯