這篇文章主要介紹了淺談Angular 的變化檢測的方法,現在分享給大家，也給大家做個參考。
Change Detection (變化偵測) 是 Angular 2 中最重要的特性。當組件中的資料發生變化的時候，Angular 2 能偵測到資料變化並自動刷新視圖反映出相應的變化。
在介紹變化偵測之前，我們要先介紹瀏覽器中渲染的概念，渲染是將模型對應到視圖的過程。模型的值可以是 JavaScript 中的原始資料型別、物件、陣列或其他資料物件。然而視圖可以是頁面中的段落、表單、按鈕等其他元素，這些頁面元素內部使用DOM(Document Object Model) 來表示，為了更好地理解，我們來看一個具體的範例：
<h4 id="greeting"></h4>
<script> document.getElementById("greeting").innerHTML = "Hello World!"; </script>這個例子很簡單，因為模型不會變化，所以頁面只會渲染一次。如果資料模型在運行時會不斷變化，那麼整個過程將會變得複雜。因此為了確保資料與視圖的同步，頁面將會進行多次渲染。接下來我們來考慮以下幾個問題：
1、什麼時候模型會改變
2、模型產生了什麼變化
#3、變更後需要更新的視圖區域在哪裡
4、怎麼更新對應視圖區域
而變化偵測的基本目的就是解決上述問題。在 Angular 2 中當元件內的模型發生變化的時候，元件內的變化偵測器就會偵測到更新，然後通知視圖刷新。因此變化檢測器有兩個主要的任務：
1、檢測模型的變化
2、通知視圖刷新
接下來我們來分析什麼是變化，變化是怎麼產生的。
變化和事件
變化是舊模型與新模型之間的區別，換句話說變化產生了一個新的模型。讓我們來看看下面的程式碼：
import { Component } from '@angular/core'; @Component({
selector: 'exe-counter',
template: `
<p>当前值：{{ counter }}</p>
<button (click)="countUp()"> + </button>` }) export class CounterComponent {
counter = 0;
countUp() { this.counter++;
}
}頁面首次渲染完後，計數器的目前值為0。當我們點選 按鈕時，計數器的 counter 值將會自動加1，之後頁面中目前值也會被更新。在這個範例中，點擊事件引起了 counter 屬性值的變化。
我們繼續看下一個例子：
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'exe-counter',
template: `
<p>当前值：{{ counter }}</p>
` }) export class CounterComponent implements OnInit {
counter = 0;
ngOnInit() {
setInterval(() => { this.counter++;
}, 1000);
}
}該元件透過 setInterval 定時器，實現每秒鐘 counter 值自動加1。在這種情況下，它是定時器事件引起了屬性值的變化。最後我們再來看個範例：
import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({
selector: 'exe-counter',
template: `
<p>当前值：{{ counter }}</p>
` }) export class CounterComponent implements OnInit {
counter = 0; constructor(private http: Http) {}
ngOnInit() { this.http.get('/counter-data.json')
.map(res => res.json())
.subscribe(data => { this.counter = data.value;
});
}
}該元件在進行初始化的時候，會傳送一個 HTTP 請求去取得初始值。當請求成功回傳的時候，元件的 counter 屬性的值會被更新。在這種情況下，它是由 XHR 回調引起了屬性值的變化。
現在我們來總結一下，引起模型變化的三類事件來源：
1、Events：click, mouseover, keyup ...
2、Timers：setInterval 、setTimeout
3、XHRs：Ajax(GET、POST ...)
這些事件源有一個共同的特性，即它們都是非同步操作。那我們可以這樣認為，所有的非同步操作都有可能會造成模型的變化。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
解決vue專案報錯webpackJsonp is not defined問題
以上是利用Angular如何實現變化檢測的詳細內容。更多資訊請關注PHP中文網其他相關文章！
