时间戳

首页 > 解决方案 > 什么是更高性能的结构指令或在 Angular 模板的表达式中使用函数？

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

问题描述

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

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

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

门票.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>

门票.component.ts

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

感谢您的任何建议！

标签： javascriptangularangular2-template

解决方案

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

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

推荐阅读