Angular - 将组件方法绑定到 DOM 目标 属性 是错误的做法吗？
Angular - Is binding a component method to DOM target property a wrong practice?
说，我有一个使用如下的组件：
<health-renderer
[health]="getHealth()"
[label]="label">
<health-renderer>
在阅读了https://angular.io/guide/template-syntax的数据绑定相关部分后，似乎我设置目标组件的方式属性 health是错误的，因为使用的模板表达式是getHealth() 这是一种方法。并且方法绑定应该只与事件一起完成，而不是属性。也就是说，模板表达式（=右边的东西）需要是一个模板变量，模板引用变量或者一个component/directive/element属性。
如果 [target]="methodCall()" 是一种错误的绑定方式，那么为什么 Angular 允许这样做？如果这是进行绑定的正确方法，那么我在最后一段中给出的理解是否错误？
此外，我应该如何修改我的代码以反映正确的事情：
- 显示当前生命值，也就是说，只是一个进度条
- 自动调用
getHealth(): integer，其中包含计算健康的业务逻辑。 0 将在健康进度条上不显示任何内容。 100 将填满进度条。
最后，我注意到 getHealth() 在每次鼠标移动或单击时无缘无故被调用 10-20 次。由于 Angular 的这种变化检测行为，将方法绑定到目标 属性 可能不是一个好的做法？
如果您知道自己在做什么，可以将方法调用用作表达式。这是引用 from the docs:
Although it's possible to write quite complex template expressions,
you should avoid them.
A property name or method call should be the norm.
如您所见，Angular 会在每次更改检测时执行表达式 运行，因此您的函数将经常执行：
Angular executes template expressions after every change detection
cycle. Change detection cycles are triggered by many asynchronous
activities such as promise resolutions, http results, timer events,
keypresses and mouse moves.
所以最好尝试用表达式中的直接 属性 访问替换方法调用。如果您的函数执行以下操作：
getHealth() {
return this.health;
}
您可以输入：
[health]="health"
在此处阅读有关更改检测的更多信息：
在数据绑定表达式中，我们可以调用函数，但它们必须没有副作用。 Here 是官方编写数据绑定表达式的指南。
由于Angular更改检测基于单向数据流策略，更改数据绑定表达式中的应用程序状态可能会导致模型之间的不一致并查看并在视图中查看它 self。
在开发模式中，检测到更改并更新视图后，Angular进行第二次检查并检查数据绑定表达式是否在更改检测阶段发生了更改。如果是这种情况，它会抛出错误（检查后表达式已更改）。因此，如果我们在数据绑定表达式中调用一个改变应用程序状态的函数，Angular 会检测到它.
因此，具有副作用的函数只能在模板语句中使用，而无副作用的函数可同时用于模板表达式和模板语句中。
说，我有一个使用如下的组件：
<health-renderer
[health]="getHealth()"
[label]="label">
<health-renderer>
在阅读了https://angular.io/guide/template-syntax的数据绑定相关部分后，似乎我设置目标组件的方式属性 health是错误的，因为使用的模板表达式是getHealth() 这是一种方法。并且方法绑定应该只与事件一起完成，而不是属性。也就是说，模板表达式（=右边的东西）需要是一个模板变量，模板引用变量或者一个component/directive/element属性。
如果 [target]="methodCall()" 是一种错误的绑定方式，那么为什么 Angular 允许这样做？如果这是进行绑定的正确方法，那么我在最后一段中给出的理解是否错误？
此外，我应该如何修改我的代码以反映正确的事情：
- 显示当前生命值，也就是说，只是一个进度条
- 自动调用
getHealth(): integer，其中包含计算健康的业务逻辑。 0 将在健康进度条上不显示任何内容。 100 将填满进度条。
最后，我注意到 getHealth() 在每次鼠标移动或单击时无缘无故被调用 10-20 次。由于 Angular 的这种变化检测行为，将方法绑定到目标 属性 可能不是一个好的做法？
如果您知道自己在做什么，可以将方法调用用作表达式。这是引用 from the docs:
Although it's possible to write quite complex template expressions, you should avoid them.
A property name or method call should be the norm.
如您所见，Angular 会在每次更改检测时执行表达式 运行，因此您的函数将经常执行：
Angular executes template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as promise resolutions, http results, timer events, keypresses and mouse moves.
所以最好尝试用表达式中的直接 属性 访问替换方法调用。如果您的函数执行以下操作：
getHealth() {
return this.health;
}
您可以输入：
[health]="health"
在此处阅读有关更改检测的更多信息：
在数据绑定表达式中，我们可以调用函数，但它们必须没有副作用。 Here 是官方编写数据绑定表达式的指南。
由于Angular更改检测基于单向数据流策略，更改数据绑定表达式中的应用程序状态可能会导致模型之间的不一致并查看并在视图中查看它 self。
在开发模式中，检测到更改并更新视图后，Angular进行第二次检查并检查数据绑定表达式是否在更改检测阶段发生了更改。如果是这种情况，它会抛出错误（检查后表达式已更改）。因此，如果我们在数据绑定表达式中调用一个改变应用程序状态的函数，Angular 会检测到它.
因此，具有副作用的函数只能在模板语句中使用，而无副作用的函数可同时用于模板表达式和模板语句中。