在Angular 1中,通过检查$ scope层次结构来进行更改检测。我们将在模板,控制器或组件中隐式或显式创建观察者。
在Angular 2中,我们不再具有$ scope,但是我们确实覆盖了setInterval,setTimeout等。我可以看到Angular如何使用它来触发$ digest,但是Angular如何确定发生了什么变化,特别是考虑到Object.observe从未进入浏览器?
这是一个简单的例子。服务中定义的对象在setInterval中更新。每个时间间隔都会重新编译DOM。
Angular如何辨别AppComponent正在监视该服务,并且该服务的属性值已更改?
var InjectedService = function() { var val = {a:1} setInterval(() => val.a++, 1000); return val; } var AppComponent = ng.core .Component({ selector: "app", template: ` {{service.a}} ` }) .Class({ constructor: function(service) { this.service = service; } }) AppComponent.parameters = [ new ng.core.Inject( InjectedService ) ]; document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(AppComponent, [InjectedService]) });
Angular为每个组件创建一个更改检测器对象(请参见ChangeDetectorRef),该对象跟踪每个模板绑定的最后一个值,例如{{service.a}}。默认情况下,在每个异步浏览器事件(例如来自服务器的响应,单击事件或超时事件)之后,都会执行Angular更改检测,并使用这些更改检测器对象对每个绑定进行脏检查。
{{service.a}}
如果检测到更改,则传播更改。例如,
{{}}
textContent
x
[style.x]
[attr.x]
[class.x]
Angular使用Zone.js创建自己的区域(NgZone),该区域对所有异步事件(浏览器DOM事件,超时,AJAX / XHR)进行猴子修补。这样,更改检测可以在每个异步事件之后自动运行。即,每个异步事件处理程序(函数)完成后,将执行Angular更改检测。