将 CSS 类 应用于 ng-bootstraps datepicker 中的自定义日期模板

Question

所以我使用 ng-bootstraps datepicker 来显示每天的一些用户数据。我使用自定义日期模板来应用某些 CSS classes

<ng-template #customDay let-date>
  <div
    class="custom-day"
    [ngClass]="evaluatePresenceType(date)"
  >
    {{ date.day }}
  </div>
</ng-template>

问题是每天都会多次调用此方法，这不是最佳方法。 有没有一种方法可以将 CSS class 应用于每天一次，当日期选择器正在呈现时而不是每次我点击任何地方时？

Answer 1

如果您想使用自定义模板日为“特价日”提供一些 class，您有两种方法：

1. 使用 [ngClass] 或 [class.myClass]="function(date)" 表示
2. 使用DayTemplateData（见docs）

嗯，文档不是很清楚。这个想法是有一个功能，例如

  data=(date: NgbDate, current?: {year: number, month: number})=>
  {
    //see that futhermore the "date" you has an object
    //current with two properties: "year" and "month" that is showing

    
    return this.calendar.getWeekday(date)>=6?'square':null
  }

那你用

<input class="form-control" [dayTemplateData]="data"
             [dayTemplate]="customDay" ...>

并且您的模板日使用 let-data=data

传递“数据”

<ng-template #customDay let-date let-data="data" ...>
  <span class="custom-day" [ngClass]="data" ...>
    {{ date.day }}
  </span>
</ng-template>

请注意，如果您只想应用唯一 class，您的函数可以 return true 或 null 并使用 [class.myClass]="data"

在stackblitz中，我使用了两种方法并使用了两个计数器来展示另一种方法的改进