Angular Material Datepicker - nextClicked，previousClicked 不发射

Question

我正在尝试使用材料日期选择器来允许用户进行预订。当用户在日期选择器中单击下个月或上个月时，我想调用一个内部方法。我可以看到 nextClicked 和 previousClicked 方法，但这些方法似乎没有发出，所以我无法执行自己的操作。

<input class="date-selected" [matDatepickerFilter]="checkInFilter" [matDatepicker]="checkInDatepicker" [min]="minDate" (focus)="checkInDatepicker.open()" [(ngModel)]="checkInDate">
<mat-datepicker #checkInDatepicker (nextClicked)="nextMonth($event)"
    (previousClicked)="previousMonth($event)">
</mat-datepicker>

nextMonth(event) {
    console.log(event);
}

previousMonth(event) {
    console.log(event);
}

当用户点击日期选择器中的下一个/上一个时，是否有调用我自己的方法？

Answer 1

我通过实现 customHeader 和共享服务解决了这个问题。

在自定义标头中，我正在调用共享服务中的一个方法，该方法设置一个变量并对此具有可观察性。

然后在主组件中订阅构造函数中的 observable 并调用我的自定义方法。

自定义标头方法

previousClicked(mode: 'month' | 'year') {
    this._calendar.activeDate = mode === 'month' ?
      this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1) :
      this._dateAdapter.addCalendarYears(this._calendar.activeDate, -1);

    this.calendarService.previousMonthClick(this._dateAdapter.getMonth(this._calendar.activeDate));
}

共享服务

private _previousMonthClick = new Subject();
  previousMonthClick$ = this._previousMonthClick.asObservable();

....

  previousMonthClick(month) {
    this._previousMonthClick.next(month);
  }

主要组件

constructor(private calendarService: CalendarService) {
    calendarService.previousMonthClick$.subscribe(e => this.previousMonth(e));
  }

...
 previousMonth(event) {
    console.log(event);
  }

Answer 2

首先：nextClicked 和 previousClicked 都不是事件发射器，因此不会产生任何输出。 检查此以获取更多信息：https://material.angular.io/components/datepicker/api（两者都是函数）

您可以使用monthSelected 发射器并尝试让它与它一起工作（跟踪更改并相应地调用下一个/上一个），尽管这个仅在选择月份时有效（即选择年份 -> 选择月份 [发射器火灾] -> 选择日期）

Answer 3

如果需要，可以用自定义组件替换日历的标题部分（包含视图切换器和上一个和下一个按钮的部分）。这是使用 的 calendarHeaderComponent 属性完成的。它接受一个组件类并构造该组件的一个实例以用作标题。

为了与自定义标题组件中的日历交互，您可以在构造函数中注入父级 MatCalendar。为确保您的标题与日历保持同步，请订阅日历的 stateChanges observable 并标记您的标题组件以进行更改检测。