小编典典

Angular 2更改检测如何工作?

angularjs

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

阅读 208

收藏
2020-07-04

共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更改检测。

2020-07-04