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

问题现象

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

<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>

登录后复制

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#的垃圾回收机制的味道。

更多编程相关知识，请访问：编程教学！！

以上就是了解Angular中的变化检测（Change Detection）机制的详细内容，更多请关注Work网其它相关文章！