什么是性能更高的结构指令或在 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

为了将单个字符附加到字符串的末尾，我会不使用 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>

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

Answer 2

场景 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>

像这样的简单转换存在管道。它们是 'pure'，这意味着它们仅在输入发生变化时才进行评估，而且它们具有极高的可重用性。

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

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

What is more performant structural directives or using functions within expressions on Angular Templates?

javascript

angular2-template

angular