1

我正在构建一个带有价格的日历，我有 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”标签中。我已经看到我的 dayClass() 函数可以通过指令 [ngClass] 使用各种方法分发，但我不想在不知道哪种方法真正最有效的情况下使用它们。

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

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

4

2 回答 2

1

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

于 2020-05-22T12:06:31.663 回答
1

您应该始终避免在模板中调用方法。那是因为渲染引擎无法确定函数是否更改了值或没有给定执行环境变量的更改。

dayClass在您的示例中，如果更改值，它无法知道是否date更改值。或者，如果另一个变量发生变化（dayClass可能不纯并且依赖于其他变量）。

因此，任何更改检测周期都需要调用该函数，以确保捕获函数值的任何更改。

你可以通过在你的函数中放置一个来见证这种行为console.log，你会看到它被执行了很多次。

当您使用直接依赖项（例如ngClass直接变量）时，渲染引擎会知道值何时更改。在你的例子中，那是condition1改变价值的时候。

例如，如果condition1是，引擎将监视和值并仅在这些值更改时触发更新（查找有关信息以了解其执行方式）。variable1 && variable2variable1variable2ngZone

因此，您可以看到避免函数调用并始终寻找直接评估更有效。

然后，ngClass或者ngClass.my_class应该具有相同的性能，它们只是直接操作 DOM。

于 2020-05-22T15:05:29.250 回答