zoukankan      html  css  js  c++  java
  • [Angular] Angular Custom Change Detection with ChangeDetectorRef

    Each component has its own ChangeDetectorRef, and we can inject ChangeDetectorRef into constructor:

    export class ChildComponent implements OnInit {
    
      constructor(
        private cdr: ChangeDetectorRef
      )

    For example if you have a huge list can be updated in real time though some real time database.

    Update in real time is really expensive for huge list. 

    We have build a custom change detector, for example, update every 5 seconds, to check changes, to do that, we need to two things,

    1. Disable default change detector

    2. Check for changes every 5 seconds.

    import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
    import { ListService } from './list.service';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.css']
    })
    export class ChildComponent implements OnInit {
    
      constructor(
        private cdr: ChangeDetectorRef,
        private dataProvider: ListService
      ) { 
        // disable default change detector
        cdr.detach();
        // now every 5second, do a check for its child tree
        setInterval(() => { this.cdr.detectChanges(); }, 5000);
      }
    
      ngOnInit() {
      }
    
    }

    There is another API: reattach() which uses for reset to default Angular change dectctor.

  • 相关阅读:
    Flex Cairngorm简介
    caringorm3学习
    实现自动间休[原创]
    vs2003/vs2005快捷键使用大全(转帖)
    美国流行口语26句
    日记 [2007年08月29日]
    一个博客的排版问题,郁闷中
    你真的懂我吗?<谈谈接口>
    教你如何辨别手机是行货还是水货
    五十音图速记法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10331474.html
Copyright © 2011-2022 走看看