带有自定义dayTemplate的Ng Bootstrap / Ngb Datepicker

Question

我有一个带有NgbDatepicker的页面，其中有一个自定义的dayTemplate来自定义样式e显示每天的其他一些信息：

它看起来很不错，但它非常慢，几分钟后页面开始冻结！

我是Angular 7和Ngx Bootstrap中的新手，我可以做些什么来提高组件的性能？

似乎NgbDatepicker在每次迭代后使用日期选择器重绘所有内容，也将鼠标悬停在上面。可以禁用此行为吗？

你可以查看the demo on stackblitz，看看我在说什么。我不知道为什么，但本地速度慢10倍（也运行编译版本生产模式）。我在第110行放了一个console.log(calendarColor[0]);来显示我正在谈论的迭代，并且这条线有点慢。同时保持de Chrome Dev工具在页面上几分钟后关闭页面冻结。

零件：

  formatDate(date: NgbDate): string {
    const month = `0${date.month}`.slice(-2);
    const day = `0${date.day}`.slice(-2);
    return `${date.year}-${month}-${day}`;
  }

  getDayCalendarColor(date: NgbDate): CalendarColor {
    const calendarColor = this.calendarColors.filter(cC => {
      return cC.date === this.formatDate(date);
    });
    if (!calendarColor.length) {
      return;
    }
    console.log(calendarColor[0]);
    return calendarColor[0];
  }

  cssCustomDay(date: NgbDate): string {
    const cssApartmentSeasonType = this.cssApartmentSeasonType(date);
    const cssCalendarType = this.cssCalendarType(date);
    return cssApartmentSeasonType + ' ' + cssCalendarType;
  }

  cssApartmentSeasonType(date: NgbDate): string {
    const calendarColor = this.getDayCalendarColor(date);
    if (!calendarColor || !ApartmentSeasonType[calendarColor.apartmentSeasonType]) {
      return;
    }
    return ApartmentSeasonType[calendarColor.apartmentSeasonType];
  }

  cssCalendarType(date: NgbDate): string {
    const calendarColor = this.getDayCalendarColor(date);
    if (!calendarColor || !CalendarType[calendarColor.calendarType]) {
      return;
    }
    const cssClass = `${CalendarType[calendarColor.calendarType]}${CalendarDay[calendarColor.calendarDay]}`;
    const isoDateString = this.formatDate(date);

    if (!this.dayCssClasses[isoDateString]) {
      this.dayCssClasses[isoDateString] = '';
    }
    if (
      !this.dayCssClasses[isoDateString] ||
      (this.dayCssClasses[isoDateString] && !this.dayCssClasses[isoDateString].includes(cssClass))
    ) {
      this.dayCssClasses[isoDateString] += cssClass;
    }
    return this.dayCssClasses[isoDateString];
  }

  dayDescription(date: NgbDate): string {
    const calendarColor = this.getDayCalendarColor(date);
    if (!calendarColor) {
      return '';
    }

    let description = 'Available ';

    let price = calendarColor.apartmentSeasonPrice;

    if (
      CalendarType[calendarColor.calendarType] &&
      [CalendarType.reserved, CalendarType.reservedOwner].includes(calendarColor.calendarType) &&
      [CalendarDay.First, CalendarDay.Center].includes(calendarColor.calendarDay)
    ) {
      return `\n ${CalendarTypeLabel.get(calendarColor.calendarType)}`;
    }

    if (calendarColor.calendarDiscountPercentage) {
      price = price - (price * calendarColor.calendarDiscountPercentage) / 100;
    }

    if (ApartmentSeasonType[calendarColor.apartmentSeasonType]) {
      description +=
        `${ApartmentSeasonTypeLabel.get(calendarColor.apartmentSeasonType)} ` +
        `${this.currencyPipe.transform(price, 'EUR')}`;
    }

    if (
      CalendarType[calendarColor.calendarType] &&
      [CalendarDay.First, CalendarDay.Center].includes(calendarColor.calendarDay)
    ) {
      description += `\n ${CalendarTypeLabel.get(calendarColor.calendarType)}`;
      if (calendarColor.calendarDiscountPercentage) {
        description += ` ${calendarColor.calendarDiscountPercentage}%`;
      }
    }

    return description;
  }  

模板：

<ngb-datepicker
  displayMonths="2"
  navigation="arrows"
  [dayTemplate]="dayTemplate"
  [showWeekNumbers]="true"
  outsideDays="hidden"
>
</ngb-datepicker>

<ng-template #dayTemplate let-date>
  <span class="custom-day" [ngClass]="cssCustomDay(date)" [ngbTooltip]="dayDescription(date)">
    <span>
      {{ date.day }}
    </span>
  </span>
</ng-template>

Answer 1

改进你的代码（我不知道改进是否是一个很大的改进）：

getDayCalendarColor(date: NgbDate): CalendarColor {
    //use an auxiliar variable
    const dateSearch=this.formatDate(date);
    //use "find", not filter -return undefined if not found-
    return this.calendarColors.find(cC => cC.date ===dateSearch);
  }

您还可以在更改日历的月份和年份时过滤日历色标

另一件事是不是每天使用ngToolTip或使用context and manual tigger使用（mouseover）和（mouseout） - 我不确定这最后一个选项 -