我们应该在 Angular 模板中使用管道而不是三元条件渲染吗？

Question

我正在研究使用 Angular 在我的模板中执行条件的最佳方法。我的目标是避免不必要的渲染和函数调用。

我注意到，如果我的模板中有一个函数来检查某些内容并将其返回到我的模板，那么这是错误的，因为当我有一些状态更改时，每次我执行某些操作时都会再次调用该函数。例如，

<div *ngFor="let user of users">
   <h3>{{ getUserRole(user.id) }}</h3>
</div>

在我的 TS 中：

getUserRole(id: number) {
   if (id === 0) {
      return 'Teacher'
   } else if (id === 1) {
      return 'Study'
   }
}

每次我在页面上执行操作时都会调用此函数。避免这种情况的一种替代方法是使用“纯管道”。

我想知道当我在模板中使用三元条件时是否也会发生这种情况。例如，

<div *ngFor="let user of users">
   <h3>{{ user.id === 0 ? 'Teacher' : 'Study' }}</h3>
</div>

如果也出现这种情况，什么时候需要使用管道？在所有情况下，我需要使用像示例这样的条件来渲染某些内容，或者仅当我的条件太重量级时（包含许多对象和属性的数组）？

Answer 1

PIPES(pure) 比内联三元运算符或调用函数更好，UMMM！

\n

为什么：-

\n

因为管道比给定的两个管道更优化。使用管道，角度渲染速度会更快。

\n

原因：-

\n

主要原因是管道的确定性。这意味着，如果我定义 一个函数，该函数不具有与给定的相同输入参数相同的内部状态，则该函数将始终产生相同的输出。这使得 Angulartransform method仅在输入参数发生变化时才进行优化和调用。

\n

基本示例：- \n我们有一个函数square()，它采用一个值并给出输入的平方值

\n

功能：-

\n

add(val): number{\nreturn val*val;\n}\n

这是我们的输入列表3, 5, 6, 6, 6, 5, 4, 3, 4, 5。（共10次）

\n

但 Angular 会调用 3、5、6、4 的函数内部代码。（仅调用 4 次）。

\n

为什么？因为它为每个输入保留结果的副本，如果它再次看到相同的输入，它会返回输出，而不对我们的 add() 函数进行内部计算。\n在这种情况下，Angular 将不会使用我们的 add 函数的内部代码

\n

您的示例的真实情况 user.id === 0 ？‘老师’：‘学习’

\n

对于像这样简单的计算，三元运算符可能会获胜，因为在此示例中，管道可能是一种矫枉过正。

\n

注意：-以上信息仅适用于纯管道，不适用于不纯管道。

\n