Angular 2更改检测如何工作?
在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更改检测,并使用这些更改检测器对象对每个绑定进行脏检查。如果检测到更改,则传播更改。例如,
- 如果输入属性值更改,则新值将传播到组件的输入属性。
- 如果
{{}}
绑定值更改,则新值将传播到DOM propertytextContent
。 - 如果
x
样式,属性或类绑定中的更改值(即[style.x]
或[attr.x]
或)更改,[class.x]
则新值将传播到DOM以更新样式,HTML属性或类。
Angular使用Zone.js创建自己的区域(NgZone),该区域对所有异步事件(浏览器DOM事件,超时,AJAX /
XHR)进行猴子修补。这样,更改检测可以在每个异步事件之后自动运行。即,每个异步事件处理程序(函数)完成后,将执行Angular更改检测。
-
检测Angular 2已完成运行
2021-02-01 关注 0 浏览71 1答案
-
如何更改Angular-Chart.js的颜色
2021-02-01 关注 0 浏览103 1答案
-
如何使用Angular组件观察组件绑定更改
2021-02-01 关注 0 浏览74 1答案
-
更改angular2中伪元素的样式
2021-02-02 关注 0 浏览94 1答案
-
如何使用$ routeProvider在Angular中更改页面标题
2021-02-01 关注 0 浏览51 1答案
-
如何检测Angular中的路线变化?
2022-03-22 关注 0 浏览22 1答案
-
是否可以在Angular 2中动态更改全局样式表?
2021-01-31 关注 0 浏览151 1答案
-
输入更改时Angular2动态输入字段会失去焦点
2021-02-02 关注 0 浏览78 1答案
-
如何检测DataGridView CheckBox事件更改?
2021-02-02 关注 0 浏览92 1答案
-
如何检测变量何时更改值
2021-01-30 关注 0 浏览133 1答案