Angular学习笔记——变化检测（Change Detection）机制

最新推荐文章于 2024-08-27 08:20:47 发布

白日|梦想家

最新推荐文章于 2024-08-27 08:20:47 发布

阅读量684

点赞数

分类专栏： Web开发文章标签： javascript web development 前端 angular typescript

本文链接：https://blog.csdn.net/hb571843232/article/details/108521394

版权

本文探讨了Angular中遇到的数据更新问题，源于变化检测机制。解释了Default和OnPush两种变化检测策略，提出了删除属性以采用默认策略或手动触发变化检测的解决方案，并提供了变化检测对象的使用方法。

摘要由CSDN通过智能技术生成

问题现象

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

<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
})

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