0

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

在此处输入图像描述

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

我对 Angular 7 和 NgBootstrap 还很陌生，我可以做些什么来提高组件的性能？

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

你可以查看stackblitz上的演示，看看我在说什么。不知道为什么，但是本地慢了10倍（也是运行编译版生产模式）。我console.log(calendarColor[0]);在第 110 行放了一个以显示我正在谈论的迭代，并且使用这条线它有点慢。还保持 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>
4

1 回答 1

0

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

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 或使用上下文和手动跳闸使用 (mouseover) 和 (mouseout) -我不确定最后一个选项 -

于 2019-03-19T09:11:58.257 回答