angular 的 ChangeDetectorRef

监测页面数据变化
angular 会在我们的组件发生变化的时候,对我们的组件执行变化检测,如果检测到我们的数据发生了变化,就会执行某些操作,如修改绑定数据的时候更新视图。这样一来,当我们的组件数据比较多的时候,angular就会有很多操作在静悄悄地进行,因此,就需要ChangeDetectorRef来实时检测数据的变化并更新视图数据
1、引入ChangeDetectorRef模块
import { ChangeDetectorRef } from “angular”;
2、声明
constructor(private cd:ChangeDetectorRef) {
}
3、引用
this.cd.detectChanges();实时检测页面及其子元素的变化

 

changeDetection: ChangeDetectionStrategy.OnPush
当使用 OnPush 策略的时候,若输入属性没有发生变化,组件的变化检测将会被跳过

ChangeDetectorRef 是组件的变化检测器的引用

export abstract class ChangeDetectorRef {
  abstract markForCheck(): void;
  abstract detach(): void;
  abstract detectChanges(): void;
  abstract reattach(): void;
}
markForCheck() - 在组件的 metadata 中如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件,那么变化检测不会再次执行,除非手动调用该方法。 detach() - 从变化检测树中分离变化检测器,该组件的变化检测器将不再执行变化检测,除非手动调用 reattach() 方法。 reattach() - 重新添加已分离的变化检测器,使得该组件及其子组件都能执行变化检测 detectChanges() - 从该组件到各个子组件执行一次变化检测

  

onPush()策略时 浅拷贝数据触发输入属性的变化以触发检查

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐