Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里，都是按照一定顺序来执行的，当轮到一个代码片段执行的时候，浏览器就只会去执行当前的片段，不会做任何其他的事情。所以有时候一些做得不是很好的网页，当点击了某个东西之后会卡住，Javascript的工作方式就是会导致这一现象原因之一！
我们先回忆下曾经的AngularJS
什么时候用$apply()？
还是那个问题，那我们到底什么时候需要去调用apply()方法呢？情况非常少，实际上几乎我们所有的代码都包在apply()方法呢？情况非常少，实际上几乎我们所有的代码都包在scope.apply()里面，像ng−click，controller的初始化，apply()里面，像ng−click，controller的初始化，http的回调函数等。在这些情况下，我们不需要自己调用，实际上我们也不能自己调用，否则在apply()方法里面再调用apply()方法里面再调用apply()方法会抛出错误。如果我们需要在一个新的执行序列中运行代码时才真正需要用到它，而且当且仅当这个新的执行序列不是被angular JS的库的方法创建的，这个时候我们需要将代码用scope.scope.apply()包起来。下面用一个例子解释：
functionCtrl($scope) {$scope.message ="Waiting 2000ms for update"; setTimeout(function () {$scope.message ="Timeout called!";// AngularJS unaware of update to $scope}, 2000); }上面的代码执行后页面上会显示：Waiting 2000ms for update。显然数据的更新没有被angular JS觉察到。
接下来，我们将Javascript的代码稍作修改，用scope.scope.apply()包起来。
functionCtrl($scope) {$scope.message ="Waiting 2000ms for update"; setTimeout(function () {$scope.$apply(function () {$scope.message ="Timeout called!";});}, 2000); }这次与之前不同的是，页面上先会显示：Waiting 2000ms for update，等待2秒后内容会被更改为：Timeout called! 。显然数据的更新被angular JS觉察到了。我们不应该这样做，而是用angular JS提供的timeout方法，这样它就会被自动用timeout方法，这样它就会被自动用apply方法包起来了。
回到最新的Angular10+，我们已经取消了$apply()这个内置方法，取而代之的是ChangeDetectorRef
Angular 各种视图的基础类，提供变更检测功能。 变更检测树会收集要检查的所有视图。 使用这些方法从树中添加或移除视图、初始化变更检测并显式地把这些视图标记为脏的，意思是它们变了、需要重新渲染。
abstract class ChangeDetectorRef {abstract markForCheck(): voidabstract detach(): voidabstract detectChanges(): voidabstract checkNoChanges(): voidabstract reattach(): void
}这里我们只需要用 detectChanges即可实现和$apply()一样的刷新数据功能，代码如下
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';@Component({selector: 'app-first',templateUrl: './first.component.html',styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit {constructor(public changeDetectorRef: ChangeDetectorRef) { }ngOnInit() {this.changeDetectorRef.detectChanges();//强制刷新数据渲染}
}
主要是这几处
更多ChangeDetectorRef内置方法请你点击↓
https://angular.cn/api/core/ChangeDetectorRef#detectchanges
https://angular.cn/api/core/ChangeDetectorRef#detectchanges
更多相关：
-
来源：公众号|计算机视觉工坊（系投稿）作者：仲夏夜之星「3D视觉工坊」技术交流群已经成立，目前大约有12000人，方向主要涉及3D视觉、CV&深度学习、SLAM、三维重建、点云后处理、自动驾驶、CV入门、三维测量、VR/AR、3D人脸识别、医疗影像、缺陷检测、行人重识别、目标跟踪、视觉产品落地、视觉竞赛、车牌识别、硬件选型、学术交流、...
-
点云PCL免费知识星球，点云论文速读。文章：Real-Time LIDAR-Based Urban Road and Sidewalk Detection for Autonomous Vehicles作者：Ern˝o Horváth , Claudiu Pozna ,and Miklós Unger编译：点云PCL代码：http...
-
文章：Semantic Histogram Based Graph Matching for Real-Time Multi-Robot Global Localization in Large Scale Environment作者：Xiyue Guo, Junjie Hu, Junfeng Chen, Fuqin Deng, T...
-
点云PCL免费知识星球，点云论文速读。文章：Robust Place Recognition using an Imaging Lidar作者：Tixiao Shan, Brendan Englot, Fabio Duarte, Carlo Ratti, and Daniela Rus编译：点云PCL（ICRA 2021）开源代码：...
-
文章：A Survey of Calibration Methods for Optical See-Through Head-Mounted Displays作者：Jens Grubert , Yuta Itoh, Kenneth Moser编译：点云PCL本文仅做学术分享，如有侵权，请联系删除。欢迎各位加入免费知识星球，获取PD...
-
angularjs是谷歌公司的一个项目，弥补了hml在构建方面的不足，通过指令（directive）来扩展html标签，可以使开发者使用html来声明动态内容。 angularjs主要用来开发单页应用（SPA）为主的项目。 angularjs四个主要特点：1.mvc模式 2.双向数据绑定 3.模块化 4.指令系统 为了使用Angula...
-
英语的重要性，毋庸置疑！尤其对广大职场人士，掌握英语意味着就多了一项竞争的技能。那，对于我们成人来说，时间是最宝贵的。如何短时间内在英语方面有所突破，这是我们最关心的事情。英语学习，到底有没有捷径可以走，是否可以速成？周老师在这里明确告诉大家，英语学习，没有绝对的捷径走，但是可以少走弯路。十多年的教学经验告诉我们，成功的学习方法可以借...
-
展开全部 其实IDLE提供了一个显32313133353236313431303231363533e78988e69d8331333365663438示所有行和所有字符的功能。 我们打开IDLE shell或者IDLE编辑器，可以看到左下角有个Ln和Col，事实上，Ln是当前光标所在行，Col是当前光标所在列。 我们如果想得到文件代码...
-
前言[1]从 Main 方法说起[2]走进 Tomcat 内部[3]总结[4]《Java 2019 超神之路》《Dubbo 实现原理与源码解析 —— 精品合集》《Spring 实现原理与源码解析 —— 精品合集》《MyBatis 实现原理与源码解析 —— 精品合集》《Spring MVC 实现原理与源码解析 —— 精品合集》《Spri...
-
【本文摘要】【注】本文所述内容为学习Yjango《学习观》相关视频之后的总结，观点归Yjango所有，本文仅作为学习之用。阅读本节，会让你对英语这类运动类知识的学习豁然开朗，你会知道英语学习方面，我们的症结所在。学习英语这类运动类知识，需要把握四个原则第一，不要用主动意识。第二，关注于端对端第三，输入输出符合实际情况第四，通过多个例子...
-
点云PCL免费知识星球，点云论文速读。文章：RGB-D SLAM with Structural Regularities作者：Yanyan Li , Raza Yunus , Nikolas Brasch , Nassir Navab and Federico Tombari编译：点云PCL代码：https://github.co...