什么是更高性能的结构指令或在 Angular 模板的表达式中使用函数？

Question

我正在与一位同事讨论在 Angular 模板上显示数据的不同方式（下面的示例显示了多个单词的情况）。

在 Angular 模板上从条件渲染数据时，最佳实践是什么？在 Angular 模板的表达式中使用结构指令或函数或三元调用是否更高效？

这 3 个场景中哪一个最有效？

tickets.component.html

1.

<span class="total-text">Total Ticket<ng-container *ngIf="ticketing.inProgressNum !== 1">s</ng-container></span>

2.

<span class="total-text"> {{ ticketing.inProgressNum !== 1 ? 'Total Tickets' : 'Total Ticket'}} </span>

3.

<span class="total-text"> {{ getTicketCopy(ticketing.inProgressNum) }} </span>

tickets.component.ts

getTicketCopy(ticketsInProgress) {
   return ticketsInProgress !== 1 ? 'Total Tickets' : 'Total Ticket'
}

感谢您的建议！

Answer 1

场景 4 是最高效和可重复使用的：管道

import { Pipe, PipeTransform } from '@angular/core';

// import this to / declare this in a module where it will be used
@Pipe({name: 'plural'})
export class PluralPipe implements PipeTransform {
  transform(str: string, value: number): number {
    return str + ((value !== 1) ? 's' : '');
  }
}

然后像这样使用它：

<span class="total-text"> {{ 'Total Ticket' | plural : ticketing.inProgressNum }} </span>

存在用于像这样的简单转换的管道。它们是“纯”的，这意味着它们仅在输入更改时才进行评估，而且它们具有极强的可重用性。

顺便说一句，Angular 实际上有一个用于复杂复数情况的内置复数指令：https://angular.io/api/common/NgPlural

Answer 2

对于将单个字符附加到字符串的末尾，我会选择没有 1，但对于更复杂的东西，我会使用

<ng-container *ngIf="ticketing.inProgressNum !== 1 else multiple">Total Ticket</ng-container>
<ng-template #multiple>Total Tickets</ng-template>

最好不要在模板中调用函数，在其中粘贴一个 console.log 并查看它们被命中的频率。

你也可以使用类似的东西

<span class="total-text">{{ticketsText}}</span>

并在您更新票证数量时更新票证文本。这是迄今为止性能最高的方法。