欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-23 13:02:02
...
了解Angular中的变化检测(Change Detection)机制

相关教程推荐:《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

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

以上就是了解Angular中的变化检测(Change Detection)机制的详细内容,更多请关注其它相关文章!