在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#detectchangeshttps://angular.cn/api/core/ChangeDetectorRef#detectchanges

總結

以上是生活随笔為你收集整理的Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。