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

Question

这两者有什么区别吗：

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

对

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

在组件 class 中：

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

Answer 1

确实没有区别。我会用

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

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

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

减少写代码。

Answer 2

不尽然，但我建议采用第二种方法，因为它更简洁并且有助于最大程度地减少模板中的数据传输。诚然，这可能看起来微不足道，但它是划分 javascript 代码的好习惯，而且它将获得代码缩小和 gzip（如果在 HTTP 请求上启用）的好处。

但是，如果这是一个例外情况，那么第一个可能对后续的其他开发人员（或您自己）更有帮助，但我只会在极少数情况下使用它，因为第二个使您能够 update/extend/fix 更容易，特别是如果您可能会重复使用相同的 rule/condition.

关于 Angular 的绑定模型，我不确定缓存方式（如果这是您的想法）或我个人看到的性能是否有很多。

希望对您有所帮助。

Answer 3

如上述答案中所述，这两种方法都可以正常工作。

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

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

但也有一些不同之处。

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

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

话虽如此，我们可能会遇到仅靠数据绑定无法解决问题的情况。在这些情况下调用函数不会是错误的！

希望对您有所帮助！ :)

Answer 4

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

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 函数的更多信息：

The mechanics of DOM updates in Angular.

Answer 5

这里的大多数答案只提到性能差异是微不足道的。我认为这是不正确的，这里的表现可能非常重要。请参考 Phil Parsons 关于此的精彩文章： Function calls in Angular expressions are killing your apps performance

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

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

Angular Templates - inline expressions vs calling to function

javascript

angular

angular5