angular - 我们应该在 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!!
为什么:-
因为管道比给定的两个更优化。使用管道， Angular 将以更快的速度呈现。
原因:-
主要原因是管道的确定性。这意味着如果我定义 一个函数 没有内部状态而不是给定的 --same 输入参数--，该函数将始终产生 --same 输出--。这允许 Angular 优化和调用 transform method仅当输入参数改变时。
基本示例:-
我们有一个函数 square() 取一个值并给出输入的平方值
功能 :-

add(val): number{
return val*val;
}

这是我们的输入列表 3, 5, 6, 6, 6, 5, 4, 3, 4, 5 . (共10次)
但是angular会调用3、5、6、4的函数内部代码。(只调用了4次)。
为什么 ？因为它为每个输入保留一份结果副本，如果它再次看到相同的输入，它会返回输出而不对我们的 add() 函数进行内部计算。
在这种情况下，angular 不会使用我们的 add 函数的内部代码
您的示例 user.id === 0 的真实世界案例？ '老师':'学习'
对于这些简单的计算，三元运算符可能会赢，因为在这个例子中管道可能是一种矫枉过正。
注意:- 以上信息仅适用于 纯管道，而不是 不纯 .