Angular *ngIf 良好实践（HTML / TS）[关闭]答案

【问题标题】：Angular *ngIf good practice (HTML / TS) [closed]Angular *ngIf 良好实践（HTML / TS）[关闭]
【发布时间】：2020-12-03 14:57:50
【问题描述】：

很长一段时间以来，我一直在我的 HTML 页面中大量使用 Angular 的条件：

<p *ngIf="var === true">Test</p>

（例如）

除了在某些页面上我有 *ngIf 需要进行数十次检查（有时甚至在同一页面中的多个标签上使用）

<p *ngIf="var1 === true && var2 === true && var3 === true && var4 === true && var5 === true && var6 === true && var7 === true && var8 = == true && var9 === true && var10 === true">Test</p>

（例如）

所以我只是修改了这个：

<p *ngIf="this.isVarsTrue()">Test</p>

在我的 TS 页面中

isVarsTrue () {
    if (var1 === true && var2 === true && var3 === true && var4 === true && var5 === true && var6 === true && var7 === true && var8 === true && var9 === true && var10 === true) {
      return true;
    } else {
      return false;
    }
  }

但是，通过在此方法中添加控制台日志，我发现它被调用了很多次（页面上的每个操作接近就绪 5 次），因此我想知道这是否是一个好习惯。

感谢您的回答。

【问题讨论】：

内联版本也被多次调用，所以没有区别。像这样调用一个简单的函数 5 次实际上没什么。（另外，您可以只使用return var1 === true && ... if(condition) return true; else return false; 中的任何一点）
如果你想说有些是真的，我通常使用简单的：，例如*ngIf="var1 && var2 && var3"。 -是的，我知道如果 var1 的值为“hello”，则条件为真，但没有人让我的变量得到值“hello”:)-。关于你的问题，性能没有区别。我喜欢明确地说“在线”。注意：尝试对变量进行排序，比其他变量更不可能得到值“true”
谢谢你的回答，太好了，我现在看得更清楚了！ :)

标签： angular typescript angular-ng-if

【解决方案1】：

这是因为当您使用 ChangeDetectionStrategy.Default 时，Angular 更改检测的工作方式是每个组件默认使用的（除非您更改它）。我想说，检查是否满足几个条件并不是一个巨大的成本（除非你有复杂的逻辑并且你的应用程序足够快）。您可以做的是更改ChangeDetectionStrategy 或将此条件的结果存储在某个变量中并在需要时重新计算。

【讨论】：

【解决方案2】：

在这种特定情况下，我认为它实际上不会损害性能。

但是，为了不在每次渲染中执行相同的代码，我建议创建一个新的组件布尔变量，该变量仅在您的多个变量更改时才会更新。它更具可读性，并且可以防止您在函数开始变得更复杂时执行代码

【讨论】：

谢谢你的回答，太好了，我现在看得更清楚了！ :)

【解决方案3】：

正如评论所述，使用您提供的简单功能时性能几乎没有差异，甚至可能是有益的，因为您说它正在多个地方使用。屏幕上的每个事件都会触发您的检查，无论它是在 HTML 中还是在打字稿中。作为我自己的一项规则，我将函数调用保留在任何 HTML 文件之外（除了特殊事件，如单击或更改事件），以阻止自己做一些愚蠢的事情并使我的应用程序超级滞后。

以下是我个人认为在 HTML 中调用安全/不安全的函数类型的一般列表：

从 HTML 调用这些类型的函数没关系

布尔值/对象/字符串/数字/等。检查
简单的 if 语句

不要从 HTML 调用这些类型的函数

遍历数组
Observable/Subject/Promise 调用
服务器调用
超时/等待

【讨论】：

谢谢你的回答，太好了，我现在看得更清楚了！ :)