Question

这两者之间有什么区别：

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li>

VS

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li>

并在组件类中：

shouldDisableField(): boolean{
  return this.condition1 && this.condition2 && this.condition3;
}

Answer 1

唯一的区别在于函数调用和在JavaScript中评估表达式，Angular在这里无关紧要。函数调用通常稍微慢一些，因此第一个选项应该稍微快一些。

Angular视图编译器为xs:integer($a)函数生成以下代码：

string-join(
  let $hex := ('0', '1', '2', '3', ... 'E', 'F')
  let $bin := ('0001', '0010', '0011', '0100', ...., '1110', '1111')
  for $a in local:charsReturn($ReadLine)
  return $bin[index-of($hex, $a)], "")

和

updateRenderer

正如你所看到的，只有一条线是不同的，这就是最重要的。

您可以在文章中详细了解function(_ck, _v) { var _co = _v.component; ---> var currVal_0 = _ck(_v, 3, 0, ((_co.condition1 && _co.condition2) && _co.condition3)); _ck(_v, 2, 0, currVal_0); }功能：

The mechanics of DOM updates in Angular。

Answer 2

不是真的，虽然我会建议第二种，因为它更清洁，有助于最大限度地减少模板中的数据传输。不可否认，这可能看起来微不足道，但是它划分javascript代码的良好做法，加上它将获得代码缩小和gzip的好处（如果在HTTP请求上启用）。

但是，如果这是一个例外情况，那么第一个可能对其他开发人员（或你自己）更有帮助，但我只会在极少数情况下使用它，因为第二个给你能够更轻松地更新/扩展/修复它，特别是如果您可能重新使用相同的规则/条件。

关于Angular的绑定模型，我不确定是否有很多缓存方式（如果这是你的想法）或性能我是否已经过了亲自见过。

希望有所帮助。

Answer 3

正如上面的答案所解释的，这两种方法都可以正常使用。

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> 

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li>

但是有一些观点会使它们与众不同。

最重要的事情之一是 AOT 策略。从 JIT 迁移到 AOT （大多数开发人员通常会发生这种情况）时，函数调用可能会很麻烦。如果被调用的函数是私有函数，则AOT编译会抛出编译时错误，因为它将模板和组件视为2个不同的实体。

另一点是，数据绑定是可读的，可以很容易理解。

话虽如此，我们可能会遇到一种情况，单靠数据绑定不会解决问题。在这些情况下调用函数不是一件坏事！

希望这对你有所帮助！：）

Answer 4

此处大多数答案仅将性能差异提到边际。我认为这是不正确的，此处的性能可能非常低。请参考Phil Parsons的精彩文章： Function calls in Angular expressions are killing your apps performance

您应该注意此处显示的性能影响

Answer 5

没有什么区别。我会用

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li>

如果我在模板中只有一个这样的表达式。否则我会用

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li>

减少书面代码。

角度模板 - 内联表达式与调用函数

5 个答案: