Html 物料日期选择器日期类（）

我在使用material的日期选择器时遇到了此问题。 材质的日期选择器有一个名为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>

<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>

克莱卡南日历酒店

我需要的是在另一个组件中调用这个方法，以便更新单元格颜色。 我该怎么办？我试图在试图调用dateClass（）的第二个组件中导入appcomponent.ts，但它不起作用

---

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

将方法移动到一些共享服务，比如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和您想要的任何其他组件使用此方法，如

in.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>
  </mat-form-field>

<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>

---

如果要在另一个组件中调用此displayClass（）方法，最佳做法是将此方法从app.component移动到somw shared service，并将this.shareDate作为参数传递，以便可以在希望它使用的任何组件中使用它。