javascript - Angular 2 属性绑定(bind)生命周期

标签 javascript html angularjs dom angular

Angular 2 中属性绑定(bind)的定义生命周期是什么?例如,我的模板中有以下元素:

<input type="radio" name="{{choice.question_id}}" value="{{choice.id}}"
                    [checked]="isSelected()"
                    (change)="select()"
                    required>

这些属性和事件回调究竟是什么时候绑定(bind)的?据我所知,有一些循环会自动刷新绑定(bind)。我在哪里可以找到关于该周期的更好解释?

如果 isSelected(),我上面的目标是让单选按钮默认被选中。因此在初始渲染后轮询 isSelected() 是多余且低效的。我如何才能将 [checked]="isSelected() 限制在元素首次添加到 DOM 的时刻?

最佳答案

绑定(bind)在每个变更检测周期进行评估。

更改检测在一些异步执行发生后运行。 Angulars zone 修补了大多数异步 API,例如 addEventHandlerremoveEventHandlersetTimeout,...在处理此类事件后,Angular 会运行更改检测并检查所有表达式绑定(bind)到输入([]{{}})。

此类事件经常发生,因此绑定(bind)表达式的计算非常频繁。因此,使这些表达式有效很重要。这是 Angular 团队不鼓励绑定(bind)到函数而宁愿将结果分配给属性并绑定(bind)到该属性的原因之一,因为属性的比较非常有效,甚至更好,绑定(bind)到可观察对象和 promise (使用 | async 管道)主动通知更改。

您无法定义在什么时候评估绑定(bind)。每次运行更改检测时都会对其进行评估。您可以通过设置 ChangeDetectionStrategy.OnPush 而不是 ChangeDetectionStrategy.CheckAlways(默认)并“手动”调用更改检测来控制何时在您的组件或其子组件上运行更改检测。

devMode 默认情况下,更改检测也会运行两次以检查第一个更改检测轮本身是否没有导致模型发生任何更改,这被认为是一个错误。如果您想知道为什么如此频繁地调用绑定(bind)方法,则需要考虑这一点。如果在 devMode 中将计数除以 2 以获得有效数,就像在 prodMode 中一样。

关于javascript - Angular 2 属性绑定(bind)生命周期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37639817/

相关文章:

javascript - CKEditor - 使用数据处理器删除脚本标签

javascript - React中查询状态,如果存在则setState或update

html - 在标题中居中图像,也使全 Angular

javascript - 如何使用表格列作为 slider

jquery - ngTable 重新加载带有服务器端分页的表

javascript - 在 Angular Controller 中比较日期字符串时出现意外响应

javascript - 在 jquery 中默认折叠所有选项卡

html - 屏幕元素被 map 挡住了?

javascript - AngularJS Http 请求同步处理?

node.js - Yeoman for Angular,然后 "grunt serve"将无法启动