9

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

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

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

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

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

  1. 显示当前的健康状况，也就是说，只是一个进度条
  2. 自动调用getHealth(): integer其中包含计算健康的业务逻辑。0 将在健康进度条上不显示任何内容。100 会填满进度条。

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

4

2 回答 2

16

It's fine to use a method call as an expression if you know what you're doing. Here is the quote 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.

As you noticed Angular executes expressions on each change detection run, so your function will be executed quite often:

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.

So it's still better to try to replace a method call with direct property access in the expression. If your function does the following:

getHealth() {
   return this.health;
}

You can put:

[health]="health"

Read more about change detection here:

于 2017-10-15T05:44:11.113 回答
0

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

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

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

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

于 2017-10-15T07:59:25.627 回答