前言：
在模板中實時獲取一個變量，模板中就頻繁的更新顯示，頻繁的變動將造成性能損耗。
或者在雙向綁定時，異步事件的發生會導致組件中的數據變化，但是你想要適當時機再改變模板顯示。

一、NgZone

Angular為我們提供了NgZone服務，對于一些頻繁的操作，可以不去觸發變更檢測。
Angular環境內注冊的異步事件都運行在這個NgZone上

原理：

參考：https://www.jianshu.com/p/4d84208d9310
NgZone是基于Zone來實現的，NgZone從Zone中fork了一份實例,是Zone派生出的一個子Zone,在Angular環境內注冊的異步事件都運行在這個子Zone上.

Zone.js 如何工作?

Zone.js 對所有常見的異步 API（setTimeout, setInterval 和 Promise）打上了“補丁” 以追蹤所有的異步操作。
Zone 是一種用于攔截和跟蹤異步工作的機制。
Zone.js 將會對每一個異步操作創建一個 task。一個 task 運行于一個 Zone 中。

NgZone：通常來說， 在 Angular APP 中，每個 task 都會在 “Angular” Zone 中運行，這個 Zone 被稱為 NgZone。一個 Angular APP 中只存在一個 Angular Zone，而變更檢測只會由 運行于這個 NgZone 中的異步操作觸發。

方法：

runOutsideAngular(): 使你的上下文中的異步任務不會觸發Angular跟蹤變化。
run(): 如果你想繼續跟蹤變化，使用run()方法即可讓Angular重新跟蹤變化。

<p (click)="change()">counter:{{counter}}</p>//在組件中引入NgZone import { NgZone } from '@angular/core';@Injectable() export class AuthService {//將其注入constructor里constructor(private _ngZone: NgZone) {}public change():void{//調用runOutsideAngular方法，Angular不會對里面的異步操作變化進行跟蹤。this._ngZone.runOutsideAngular(() => {for (let i = 0; i < 10; i++) {//對里面的同步任務還是會變化進行跟蹤的， 頁面顯示上counter會變動; //this.counter = 30//對里面的異步操作變化不會進行跟蹤setTimeout(() => {//angular不會對這里的變化進行跟蹤this.counter++;if(i==9){//如果注釋這塊點擊后頁面counter不會變動；如果此時又想讓angular跟蹤counter的變化，直接調用NgZone的run方法this._ngZone.run(() => {console.log('Outside Done!') });}}, 10);}});} }

總結

以上是生活随笔為你收集整理的@angular/core里的 NgZone -使得Angular不跟踪变化的全部內容，希望文章能夠幫你解決所遇到的問題。

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