Question

说，我有一个使用如下的组件：

 <health-renderer
      [health]="getHealth()"
      [label]="label">
 <health-renderer>

从https://angular.io/guide/template-syntax读取与数据绑定相关的部分之后，我设置目标组件属性health的方式似乎是错误的，因为使用的模板表达式是getHealth()这是一种方法。方法绑定只能用事件来完成，而不是属性。换句话说，模板表达式（=右侧的东西）需要是模板变量，模板引用变量或组件/指令/元素属性。

如果[target]="methodCall()"是一种错误的绑定方式，那么Angular为什么允许它？如果这是做绑定的正确方法，那么我在上一段中给出的理解是错误的吗？

此外，我应该如何修改我的代码以反映正确的事情：

显示当前的健康状况，只是一个进度条
自动调用包含用于计算运行状况的业务逻辑的getHealth(): integer。 0将在健康状况的进度条上显示任何内容。 100将填满进度条。

最后，我注意到每次鼠标移动或点击都会无缘无故地调用getHealth（）10-20次。由于Angular的这种变化检测行为，可能将方法绑定到目标属性不是一个好习惯吗？

Answer 1

如果您知道自己在做什么，可以将方法调用用作表达式。这是引用from the docs：

虽然可以编写非常复杂的模板表达式，   你应该避免它们。

属性名称或方法调用应该是常态。

正如您注意到Angular在每次更改检测运行时执行表达式，因此您的函数将经常执行：

Angular在每次更改检测后执行模板表达式周期。更改检测周期由许多异步触发承诺解决方案，http结果，计时器事件等活动，按键和鼠标移动。

因此，尝试使用表达式中的直接属性访问替换方法调用仍然更好。如果您的功能执行以下操作：

getHealth() {
   return this.health;
}

你可以把：

[health]="health"

在此处阅读有关变更检测的更多信息：

Everything you need to know about change detection in Angular

Answer 2

在数据绑定表达式中，我们可以调用函数，但它们必须是无副作用的。 Here是编写数据绑定表达式的官方指南。

由于角度变化检测基于单向数据流策略，因此在数据绑定表达式中更改应用程序状态会导致模型和视图之间的不一致，并且在视图中它会自我。

在开发模式中，在检测到更改并更新视图后，Angular会执行第二次传递并检查更改检测阶段期间数据绑定表达式是否已更改。如果是这种情况则会抛出错误（表达式在检查后已更改）。因此，如果我们调用一个改变数据绑定表达式中的应用程序状态的函数， Angular检测它。

因此，带副作用的函数只能在模板语句中使用，副作用自由函数可以在模板表达式和模板语句中使用。

Angular - 将组件方法绑定到DOM目标属性是一种错误的做法吗？

2 个答案: