了解Angular中的变化检测(Change Detection)机制

  • 来源:网络
  • 更新日期:2020-09-11

摘要:相关教程推荐:《angular教程》问题现象在开发过程中,遇到前台页面数据不更新的问题。前台页面中采用了插值表达式绑定后台数据字段,在后台调用接口成功后会修改数据字段,但此时

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

问题现象

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

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

参考资料:

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

更多编程相关知识,请访问:编程教学!!