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(); }, );
} ngOnInit() {
} }

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

[Angular] Angular Custom Change Detection with ChangeDetectorRef的更多相关文章

  1. angular 2 - 006 change detection 脏治检查 - DC

    ANGULAR CHANGE DETECTION EXPLAINED 引发脏治检查有三种方式: Events - click, submit, - XHR - Fetching data from a ...

  2. CHANGE DETECTION IN ANGULAR 2

    In this article I will talk in depth about the Angular 2 change detection system. HIGH-LEVEL OVERVIE ...

  3. [Angular & Unit Testing] Automatic change detection

    When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: ...

  4. [Audio processing] Harmonic change detection function (HCDF)

    Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step ...

  5. angular 有关侦测组件变化的 ChangeDetectorRef 对象

    我们知道,如果我们绑定了组件数据到视图,例如使用 <p>{{content}}</p>,如果我们在组件中改变了content的值,那么视图也会更新为对应的值. angular ...

  6. [Angular] Http Custom Headers and RequestOptions

    updatePassenger(passenger: Passenger): Observable<Passenger> { let headers = new Headers({ 'Co ...

  7. [Angular] Create custom validators for formControl and formGroup

    Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...

  8. [Angular] Read Custom HTTP Headers Sent by the Server in Angular

    By default the response body doesn’t contain all the data that might be needed in your app. Your ser ...

  9. [Angular 2] Custom Validtors

    Create a custom validtor which only accepts the string start with '123'; function skuValidator(contr ...

随机推荐

  1. win端git连接私服仓库+上传本地项目+从服务器下载文件到win

    win端git连接私服仓库: 1.win端 检查c:/Users/用户/.ssh/目录下是否有config文件(!!!没有任何后缀名).如果没有则新建config文件,然后修改添加如下内容: Host ...

  2. sudo cd为什么不能够执行

    问题描述 我想要cd到/etc/docker,但是它给我一个权限不够的错误,然后,我想到使用sudo cd /etc/docker时,它告诉我sudo: cd:找不到命令. 于是,郁闷的我就去上网找了 ...

  3. Spring MVC 基础篇4

    Spring MVC Controller中返回数据到页面 1.使用ModelAndView 进行数据返回到请求页面 2.利用Map类型的入参进行Controller返回到页面上 3.将数据放到Ses ...

  4. [BZOJ2049][Sdoi2008]Cave 洞穴勘测 LCT模板

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 9705  Solved: 4674[Submit] ...

  5. javaScript Promise 入门

    Promise是JavaScript的异步编程模式,为繁重的异步回调带来了福音. 一直以来,JavaScript处理异步都是以callback的方式,假设需要进行一个异步队列,执行起来如下: anim ...

  6. xunsearch: 开启后台服务,索引……随笔记录

    重启后台服务: cd $prefix ; bin/xs-ctl.sh restart 索引: # 导入 MySQL 数据库的 dbname.tbl_post 表到 demo 项目中,并且平滑重建 ut ...

  7. (1)Maven安装及配置

    一.下载 http://maven.apache.org/download.cgi 解压 二.配置环境变量  1 2.path mvn -version 三.本地仓库 本地仓库用来存放远程下载的包,默 ...

  8. 整数快速乘法/快速幂+矩阵快速幂+Strassen算法

    快速幂算法可以说是ACM一类竞赛中必不可少,并且也是非常基础的一类算法,鉴于我一直学的比较零散,所以今天用这个帖子总结一下 快速乘法通常有两类应用:一.整数的运算,计算(a*b) mod c  二.矩 ...

  9. 谜题8:Dos Equis

    这个谜题将测试你对条件操作符的掌握程度,这个操作符有一个更广为人知的名字:问号冒号操作符.下面的程序将会打印出什么呢? public class DosEquis{ public static voi ...

  10. CodeForces - 981G Magic multisets

    假设我们可以对每个位置快速维护一个数组,记录每个位置有哪些值是已经出现了的,哪些值是没有出现的,这样就可以决定修改的时候到底是 *2 还是 +1了. 但是很可惜,并不存在功能这么强大的数组,所以只能另 ...