Angular 2更改检测如何工作？

Question

在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])
});

Answer 1

Angular为每个组件创建一个更改检测器对象（请参见ChangeDetectorRef），该对象跟踪每个模板绑定的最后一个值，例如{{service.a}}。默认情况下，在每个异步浏览器事件（例如来自服务器的响应，单击事件或超时事件）之后，都会执行Angular更改检测，并使用这些更改检测器对象对每个绑定进行脏检查。

如果检测到更改，则传播更改。例如，

• 如果输入属性值更改，则新值将传播到组件的输入属性。
• 如果{{}}绑定值更改，则新值将传播到DOM property textContent。
• 如果x样式，属性或类绑定中的更改值（即[style.x]或[attr.x]或）更改，[class.x]则新值将传播到DOM以更新样式，HTML属性或类。

Angular使用Zone.js创建自己的区域（NgZone），该区域对所有异步事件（浏览器DOM事件，超时，AJAX /
XHR）进行猴子修补。这样，更改检测可以在每个异步事件之后自动运行。即，每个异步事件处理程序（函数）完成后，将执行Angular更改检测。