gpt4 book ai didi

angularjs - Angular 2 变化检测是如何工作的?

转载 作者:太空狗 更新时间:2023-10-29 16:49:32 32 4
gpt4 key购买 nike

在 Angular 1 中,变更检测是通过脏检查 $scope 层次结构来实现的。我们会在我们的模板、 Controller 或组件中隐式或显式地创建观察者。

在 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 ),它跟踪每个模板绑定(bind)的最后一个值,例如 {{service.a}}。默认情况下,在每个异步浏览器事件(例如来自服务器的响应、单击事件或超时事件)之后,Angular 更改检测执行并使用这些更改检测器对象对每个绑定(bind)进行脏检查。

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

  • 如果输入属性值发生变化,新值将传播到组件的输入属性。
  • 如果 {{}} 绑定(bind)值发生变化,新值将传播到 DOM 属性 textContent
  • 如果 x 的值在样式、属性或类绑定(bind)中发生变化——即 [style.x][attr.x][class.x] – 新值被传播到 DOM 以更新样式、HTML 属性或类。

Angular 使用 Zone.js 创建自己的区域 ( NgZone ),它会猴子修补所有异步事件(浏览器 DOM 事件、超时、AJAX/XHR)。这就是变化检测能够在每个异步事件之后自动运行的方式。即,在每个异步事件处理程序(函数)完成后,将执行 Angular 变化检测。

我在这个答案中有更多的细节和引用链接:What is the Angular2 equivalent to an AngularJS $watch?

关于angularjs - Angular 2 变化检测是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35469024/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com