哪种方法将类应用于html标签具有最佳性能？角2

Question

我正在建立带有价格的日历，我有3个嵌套元素：

- calendar-layout
-- calendar-month
--- calendar-week

在日历周中，我需要针对每天可能使用的不同样式进行几次计算，

    // Calendar-week Html
    <div [ngClass]="dayClass(date, i)" *ngFor="let date of days; let i = index;"
         (click)="onClick(date)" [class.not-selectable]="isDayNotSelectable(date)">
       <span class="date-number">{{ date |  date:'d'  }}</span>
       <small class="price" *ngIf="calendarInfo.prices"> {{ getPrice(date) }} </small>
    </div>

// Calendar-week Component
  dayClass(date, i) {
    let cssClass = 'day ';
    if (isDateFrom()) return `${cssClass} selected dateFrom`;
    if (isDateTo()) return `${cssClass} selected dateTo`;
    if (isBeetween()) return `${cssClass} between`;
    if (isReccommended()) cssClass += `recommended `;
    if (isNotPrices()) return cssClass;
    let price = this.calendarInfo.prices[date].price
    cssClass += price <= this.minPrice ? 'low' : price >= this.maxPrice ? 'high' : 'normal';
    return cssClass;
  }

如我们所见，“ day”标记中可以放置许多类。我已经看到可以使用带有[ngClass]指令的各种方法来分发我的dayClass（）函数，但是我不希望在不知道哪种方法真正最有效的情况下使用它们。

[ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}"
[ngClass.class1]="menu1 || menu2" [ngClass.class2]="(menu1 || menu2) && something">   

有人知道将类应用于具有多个计算的HTML标签的最有效方法是什么？

Answer 1

创建一个纯管道，这样您的管道将不会被调用，直到您更改日期为止。该管道将​​返回该日期的类，并且直到您的日期更改才会被调用。您当前的方法不好，因为您的方法将在每次重新渲染时调用。