angular - 如何捕捉 Material Datepicker 月份分页事件？

Question

我想捕捉来自月份“左”和“右”选择按钮的事件，但我找不到任何关于它的文档。



在 Material Datepicker 中单击“左”和“右”月份选择框时会触发哪些事件？

Answer 1

好吧，我的另一个回答是错误的，让我们换一个方法。
假设我们有一个 CustomTemplate Header。因为我们希望它看起来像原始的 DatePicker header ，所以我们复制了 gitHub of angular 中的模板。 ，但我们正在更改上一个按钮旁边的功能，所以就像

<div class="mat-calendar-header">
  <div class="mat-calendar-controls">
    <button mat-button type="button" class="mat-calendar-period-button"
            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
            cdkAriaLive="polite">
      {{periodButtonText}}
      <div class="mat-calendar-arrow"
           [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
    </button>

    <div class="mat-calendar-spacer"></div>

    <ng-content></ng-content>

                <!--see that we change previousClicked by customPrev-->
    <button mat-icon-button type="button" class="mat-calendar-previous-button"
            [disabled]="!previousEnabled()" (click)="customPrev()"
            [attr.aria-label]="prevButtonLabel">
    </button>

                <!--see that we change nextClicked by customNext-->
    <button mat-icon-button type="button" class="mat-calendar-next-button"
            [disabled]="!nextEnabled()" (click)="customNext()"
            [attr.aria-label]="nextButtonLabel">
    </button>
  </div>
</div>  

现在我们定义了从 MatCalendarHeader 扩展的 customHeader

export class ExampleHeader extends MatCalendarHeader<any> {

  /** Handles user clicks on the period label. */
  currentPeriodClicked(): void {
    this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';
  }

  /** Handles user clicks on the previous button. */
  customPrev(): void {
    console.log(this.calendar.activeDate)
    this.previousClicked()
  }

  /** Handles user clicks on the next button. */
  customNext(): void {
    console.log(this.calendar.activeDate)
    this.nextClicked()
  }

然后，只说使用这个 ExampleHeader

<mat-form-field>
  <mat-label>Custom calendar header</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
</mat-form-field>

见 stackblitz