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.

  • 相关阅读:
    CS224d lecture 16札记
    CS224d lecture 15札记
    CS224d lecture 14札记
    CS224d lecture 13札记
    将博客搬至CSDN
    三张图理解JavaScript原型链
    三道题理解软件流水
    网络安全密码学课程笔记
    “wuliao“(无聊)聊天软件
    大二小学期C#资产管理大作业小记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10331474.html
Copyright © 2011-2022 走看看