Angular 2 Change Detection - 1
脚本宝典收集整理的这篇文章主要介绍了Angular 2 Change Detection - 1，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
阅读 Angular 6/RxJS 最新教程，请访问前端修仙之路
Change detection (变化检测) 是 Angular 2 中最重要的一个特性。当组件中的数据发生变化的时候，Angular 2 能检测到数据变化并自动刷新视图反映出相应的变化。
在介绍变化检测之前，我们要先介绍一下浏览器中渲染的概念，渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其他数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素，这些页面元素内部使用 DOM (Document Object Model) 来表示。
为了更好地理解，我们来看一个具体的示例：
<h4 id="greeting"></h4>
<script>
document.getElementById("greeting").innerHTML = "Hello World!";
</script>这个例子很简单，因为模型不会变化，所以页面只会渲染一次。如果数据模型在运行时会不断变化，那么整个过程将变得复杂。因此为了保证数据与视图的同步，页面将会进行多次渲染。接下来我们来考虑一下以下几个问题：
- 什么时候模型会发生变化
- 模型产生了什么变化
- 变化后需要更新的视图区域在哪里
- 怎么更新对应视图区域
而变化检测的基本目的就是解决上述问题。在 Angular 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 回调引起了属性值的变化。
现在我们来总结一下，引起模型变化的三类事件源：
- Events：click, mouseover, keyup ...
- Timers：setInterval、setTimeout
- XHRs：Ajax(GET、POST ...)
这些事件源有一个共同的特性，即它们都是异步操作。那我们可以这样认为，所有的异步操作都有可能会引起模型的变化。
非常好，你已经了解了引起模型变化的事件源和触发变化的时机点。但是你还不知道，是由谁来负责通知相应的变化给视图。接下来，我们将讨论一种允许 Angular 随时检测到变化的机制，它被称为 Zone 。
Zones
Zone 是下一个 ECMAScript 规范的建议之一。Angular 团队实现了 JavaScript 版本的 zone.js ，它是用于拦截和跟踪异步工作的机制。
Zone 是一个全局的对象，用来配置有关如何拦截和跟踪异步回调的规则。Zone 有以下能力：
- 拦截异步任务调度
- 提供了将数据附加到 zones 的方法
- 为异常处理函数提供正确的上下文
- 拦截阻塞的方法，如 alert、confirm 方法
我们来看一个简单的示例：
Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(function () {
console.LOG('in the zone: ' + !!Zone.current.inTheZone);
}, 0);
});
console.log('in the zone: ' + !!Zone.current.inTheZone);以上代码运行后的结果是：
in the zone: false
in the zone: true
是不是感觉很神奇！在Angular 2 中，有一个 NgZone，它是专门为 Angular 2 定制的 zone。在正式介绍它之前，我们先来看一下 Angular 1.x 中的一个例子：