zoukankan      html  css  js  c++  java
  • 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() - 从该组件到各个子组件执行一次变化检测 检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。

      

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

  • 相关阅读:
    操作系统基础知识与常见问题记录
    String
    Function
    HelloWorld
    替换空格
    二维数组中的查找
    建造者模式(Builder Pattern)
    单例模式(Singleton Pattern)
    工厂方法(Factory Pattern)
    设计模式概述
  • 原文地址:https://www.cnblogs.com/lskzj/p/11143233.html
Copyright © 2011-2022 走看看