[JavaScript知识库]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(): void
  abstract detach(): void
  abstract detectChanges(): void
  abstract checkNoChanges(): void
  abstract 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#detectchangeshttps://angular.cn/api/core/ChangeDetectorRef#detectchanges