Angular 2更改检测如何工作？

Angular 2更改检测如何工作？

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