Angular 2属性绑定生命周期

时间:2016-06-05 08:16:28

标签: javascript html angularjs dom angular

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

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

什么时候绑定了那些属性和事件回调?据我所知,有一些循环会自动刷新绑定。我可以在哪里找到关于这个循环的更好的解释?

我的目标是在isSelected()时默认选择 。因此,在初始渲染之后轮询isSelected()是多余且低效的。如何将[checked]="isSelected()限制在元素首次添加到DOM的时刻?

2 个答案:

答案 0 :(得分:2)

在每个变化检测周期评估结合。

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

此类事件非常频繁地发生,因此非常频繁地评估绑定表达式。因此,使这些表达有效是很重要的。这是Angular团队不鼓励绑定到函数并将结果分配给属性并绑定到该属性的原因之一,因为属性的竞争非常有效,甚至更好地绑定到observable和promises(使用{{ 1}}管道)主动通知变化。

您无法定义评估绑定的位置。每次更改检测运行时都会对其进行评估。您可以通过设置| async而不是ChangeDetectionStrategy.OnPush(默认值)来控制组件或其子组件上运行更改检测,然后手动调用更改检测&#34;。

ChangeDetectionStrategy.CheckAlways默认情况下,更改检测也会运行两次,以检查第一次更改检测转向本身是否导致模型中的任何更改被视为错误。如果您想知道为什么频繁调用绑定方法,则需要考虑这一点。如果在devMode中将计数除以2,则获得devMode中的有效数字。

答案 1 :(得分:0)

您可以查看这篇文章Angular change detection本文描述了如何更改组件更改的检测(通过更改检测策略或将所有输入道具更改为可观察对象),而不是自己的DOM元素。说实话,我不知道如何从angularjs创建一次性绑定。在我看来,一次性绑定是Angular 2中过时的概念,他们专注于在Web组件级别上优化隐藏或摘要周期....