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

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无关紧要。函数调用通常稍微慢一些，因此第一个选项应该稍微快一些。

角视图编译器为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);
}

和

function(_ck, _v) {
    var _co = _v.component;
--> var currVal_0 = _ck(_v, 3, 0, _co.shouldDisableField());
    _ck(_v, 2, 0, currVal_0);
}

如您所见，只有一行是不同的，这就是所有。

您可以updateRenderer在文章中阅读有关功能的更多信息：

• Angular中DOM更新的机制。

Answer 2

此处大多数答案仅将性能差异提到边缘。我认为这是不正确的，此处的性能可能非常低。请参考Phil Parsons的精彩文章： Angular表达式中的函数调用正在破坏您的应用程序性能

您应该知道那里显示的性能下降