材料日期选择器 dateClass()答案

【问题标题】：material datepicker dateClass()材料日期选择器 dateClass()
【发布时间】：2020-10-06 17:10:25
【问题描述】：

我正在使用材料的日期选择器并遇到了这个问题。 material 的 datepicker 有一个名为 dateClass 的方法：

dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
      const unvailableArray = this.shareDate.unavailableDates;
      const reservedArray = this.shareDate.reservedDate;
      let day = 'freeDate';
      for (const element of reservedArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'prenotation';
          return day;
        }
      }
      for (const element of unvailableArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'unavailable';
          return day;
        }
      }
      return day;
    };

  }

此方法位于 appCmponent.ts 中，允许我通过循环日期数组列表来为日历单元格着色，并在 appComponent.html 中调用

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Clicca sul calendario</mat-label>
    <input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass()" #picker> </mat-datepicker>
  </mat-form-field>

我需要在另一个组件中调用此方法以更新单元格颜色。我能怎么做？我试图在试图调用 dateClass () 的第二个组件中导入 appcomponent.ts 但它不起作用。

你能帮我解决这个问题吗？

【问题讨论】：

如果你想在另一个组件中调用这个 displayClass() 方法，最好的做法是把这个方法从 app.component 移动到 somw 共享服务，并将 this.shareDate 作为参数传递，这样你就可以在您希望它使用的任何组件中使用它。

标签： html css angular typescript angular-material

【解决方案1】：

将方法移至某个共享服务，例如 shared.service.ts

dateClass(shareDate : any) {
return (date: Date): MatCalendarCellCssClasses => {
  const unvailableArray = shareDate.unavailableDates;
  const reservedArray = shareDate.reservedDate;
  let day = 'freeDate';
  for (const element of reservedArray) {
    if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
      date.getDate() === element.getDate()) {
      day = 'prenotation';
      return day;
    }
  }
  for (const element of unvailableArray) {
    if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
      date.getDate() === element.getDate()) {
      day = 'unavailable';
      return day;
    }
  }
  return day;
}

现在您可以在 app.component 和任何其他您想要的组件中使用此方法，例如

在 .component.html 中

<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Clicca sul calendario</mat-label>
<input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass()" #picker> </mat-datepicker>

在组件.ts中

dateClass(){
 return this.sharedService.displayClass(this.shareDate);
}

【讨论】：