了解Angular中的变化检测(Change Detection)机制_编程技术_亿码酷站

了解Angular中的变化检测(Change Detection)机制_编程技术_亿码酷站

服务器 VIP24小时自助开通

编程技术了解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#的垃圾回收机制的味道。

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

了解Angular中的变化检测(Change Detection)机制
—–文章转载自PHP中文网如有侵权请联系admin#tyuanma.cn删除

php如何安装snmp扩展

分享到 :
服务器 VIP24小时自助开通
相关推荐

5种Angular中组件通信的方法介绍_编程技术_编程开发技术教程

5种Angular中组件通信的方法介绍_编程技术_编程开发技术教程

了解一下angular中的@Input()和@Output()_编程技术_亿码酷站

了解一下angular中的@Input()和@Output()_编程技术_亿码酷站

如何安装和使用Angular CLI?(图文详解)_亿码酷站_编程开发技术教程

如何安装和使用Angular CLI?(图文详解)_亿码酷站_编程开发技术教程

Angular中使用ngrx/store进行状态管理_编程技术_亿码酷站

Angular中使用ngrx/store进行状态管理_编程技术_亿码酷站