[Angular] Angular Custom Change Detection with ChangeDetectorRef
2024-10-21 09:32:18
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.
最新文章
- 封装js的部分兼容性
- IT路上爹爹装装遇到的坑
- C#文本写入文件,追加写入文件
- ES6的Class
- Node.js 创建HTTP服务器(经过测试,这篇文章是靠谱的T_T)
- ***JAVA多线程的应用场景和应用目的举例
- 【POJ 3279 Fliptile】开关问题,模拟
- 中国三种3G网络频段
- 列";xx";不在表Table中
- px单位html5响应式方案
- docker for windows 10 添加阿里云镜像仓库无效问题
- Email实例
- AngularJS监听数组变化
- JS 正则截取字符串
- js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】
- Java并发容器——ConcurrentSkipListMap和ConcurrentHashMap
- java socket 之UDP编程
- 利用PHPExcel导出Excel相关设置
- PHP快速入门 如何导入网站模板
- Tomcat 下 mysql的连接池配置和使用
热门文章
- picker鼠标上下拖动选择内容
- 在oracle官网上,找到我们所需版本的jdk
- ros pcl sensor::pointcloud2 转换成pcl::pointcloud
- Jquery实现全选和取消全选的方法
- debian 更换sh的默认链接为bash
- 安装Team Services Agent Win7
- postman用法总结+newman持续集成
- 【ZOJ】3785 What day is that day? ——KMP 暴力打表找规律
- 表(Table)
- 【线段树】Gym - 100507C - Zhenya moves from parents