Angular：在 html 模板中使用三元运算符答案

【问题标题】：Angular: Using the ternary operator in html templateAngular：在 html 模板中使用三元运算符
【发布时间】：2020-03-28 08:27:39
【问题描述】：

在 html 中可以像这样使用简单的三元运算符：

<div> {{ showStringOneFlag ? 'Display String 1' : 'Display String 2' }} </div>

这可能比在javascript中设置一个字符串变量20次更方便。

我的问题是三元运算符是否太昂贵而无法在每个摘要循环中执行？是否应该避免或谨慎使用此功能？它在消化周期中的足迹是最小的吗？不需要担心吗？我到处寻找答案，我发现它在速度方面与 if/else 语句相当，但在 html 中并没有真正等同于 if/else 语句。

【问题讨论】：

您所展示的内容在 HTML 中的意义绝对为零。它仅表示 div 内的文字文本 "{{ showStringOneFlag ? 'Display String 1' : 'Display String 2' }}"。
有了angular 的附加上下文，这现在有点道理，在它没有之前......
您只是想单独衡量三元运算符的性能还是将其与其他方法（例如管道）进行比较？
@IraklisGkougkousis 完全正确。我想知道它是否被视为 *ngIf 或 pipe 仅在输入更改时重新计算，还是更像是添加一个在每个摘要周期计算的函数。
@rhavelka 按摘要周期，您是指生命周期吗？无论如何，在花括号之间插入的表达式将在每个 ngOnChanges 循环中重新计算。

标签： html angular conditional-operator

【解决方案1】：

1) 三元运算符是否太昂贵而无法在每个摘要循环中执行？

在每个摘要周期执行三元运算符本身不应该太昂贵。三元运算符应在微秒范围内进行评估。话虽如此，如果你调用一个计算结果为真/假的函数，或者如果你的三元运算符本身调用一个函数，那么它可能需要毫秒以上的时间，具体取决于你的函数有多昂贵。

2) 是否应该避免或谨慎使用此功能？

如果它们是干净的三元运算符，即在没有函数调用的情况下进行显式比较，那么您应该可以使用任意数量的运算符，不会产生重大影响。

3) 我到处寻找答案，我发现它在速度方面与 if/else 语句相当，但在 html 中并没有真正等同于 if/else 语句。

这显然是您对 Angular Interpolation 工作原理的误解。我建议阅读Template Syntax。

【讨论】：

【解决方案2】：

如果您想在您的应用程序中广泛使用它，我认为您可以使用它，只要您不将它与 Angular 的默认更改检测策略一起使用。默认情况下，DOM 事件、xhr 和计时器将触发更改检测，这将导致 Angular 重新评估该表达式，如果您之前从未处理过 Angular 的默认更改检测策略，让我向您保证，它运行的次数比您想象的要多得多。如果您曾经将控制台日志放在组件中，只是在您的开发工具中看到它记录了数百次，那么这可能是默认策略与模板中的功能混合使用。

那么还有什么其他政策呢？ OnPush

概括地说，如果您的组件仅从 @Input 获取数据（就像在容器/表示组件模型中一样），您可以使用 OnPush 检测。如果你这样做，Angular 不会在 DOM 事件、xhr 和计时器上运行更改检测，它只会在 @Input 更改时运行更改检测，这显然更有效。

TL;DR
如果您想经常使用该表达式，您应该考虑使用 OnPush 更改检测，这将防止它不必要地重新评估该表达式。

变更检测介绍：
https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
https://medium.com/@bencabanes/angular-change-detection-strategy-an-introduction-819aaa7204e7

【讨论】：

【解决方案3】：

HTML 是一种声明性标记语言，不支持 if 语句等控制结构。您很可能指的是一些模板引擎，到目前为止，它是未知的，无法推理。

【讨论】：

作者使用的是带有模板引擎的Angular。

【解决方案4】：

简短的回答是这取决于您有条件地渲染什么，以及使用三元是否有意义。

对于简单的条件渲染，当然，三元组很好，不会以明显的方式影响性能。

但是，如果您有条件地渲染大量代码，或者在代码中的多个点执行多个/复杂的计算以确定渲染的内容，那么在 HTML 之外执行此步骤可能更明智。

欲了解更多信息，请参阅SO link

【讨论】：