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

【问题标题】：Angular - Is binding a component method to DOM target property a wrong practice?Angular - 将组件方法绑定到 DOM 目标属性是错误的做法吗？
【发布时间】：2018-03-26 18:28:38
【问题描述】：

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

 <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的这种更改检测行为，将方法绑定到目标属性可能不是一个好习惯？

【问题讨论】：

另请查看this question

标签： angular angular2-changedetection angular2-databinding

【解决方案1】：

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

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

属性名称或方法调用应该是规范。

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

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

因此，最好尝试用表达式中的直接属性访问替换方法调用。如果您的函数执行以下操作：

getHealth() {
   return this.health;
}

你可以放：

[health]="health"

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

Everything you need to know about change detection in Angular

【讨论】：

计算值最好使用方法调用。
@MohamedGara，这取决于操作的类型和输入值的变化频率。没有什么能阻止您按照以下方式进行[health]="health + other"。 Angular 提倡声明式风格，这就是声明式风格

【解决方案2】：

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

由于 Angular 更改检测基于 单向数据流 策略，在数据绑定表达式中更改应用程序状态可能会导致 模型和视图之间以及视图自身之间的不一致。

在开发模式中，在检测到变化并更新视图之后，Angular 会进行第二遍检查，并在变化检测阶段检查数据绑定表达式是否发生了变化。如果是这种情况，则会引发错误（检查后表达式已更改）。因此，如果我们在数据绑定表达式中调用改变应用程序状态的函数，Angular 会检测到它。

因此，具有副作用的函数只能在模板语句中使用，而无副作用的函数既可以在模板表达式中使用，也可以在模板语句中使用。

【讨论】：