angular - Angular Material点击下个月或上个月不起作用

Question

代码片段：

<mat-calendar *ngIf="dataAvailable" #openCalendar [dateClass]="getAttendance()" (selectedChange)="onSelect($event)" (monthSelected)="monthSelected($event)"> </mat-calendar>

在单击下个月和上个月时，Angular Material 没有提供任何调用某些事件的选项。如果我们需要使用 Angular Material 日历，是否有解决方法？

Answer 1

对于那些仍在为这个问题寻找解决方案的人，您可以使用 ngAfterViewInit 中的查询选择器访问上一个和下一个箭头，这可能不是最好的方法，但它对我有用

ngAfterViewInit(): void {
  const BACK_BUTTON = document.querySelector('.mat-calendar-previous-button');
  const FORWARD_BUTTON = document.querySelector('.mat-calendar-next-button');
  if (BACK_BUTTON) {
    this.renderer.listen(BACK_BUTTON, 'click', () => {
      console.log(this.dateAdapter.today());
      if (this.calendarDate.getMonth() === 0) {
        this.calendarDate.setFullYear(this.calendarDate.getFullYear() - 1);
        this.calendarDate.setMonth(11);
      } else {
        this.calendarDate.setMonth(this.calendarDate.getMonth() - 1);
      }
    });
  }
  if (FORWARD_BUTTON) {
    this.renderer.listen(FORWARD_BUTTON, 'click', () => {
      if (this.calendarDate.getMonth() === 11) {
        this.calendarDate.setFullYear(this.calendarDate.getFullYear() + 1);
        this.calendarDate.setMonth(0);
      } else {
        this.calendarDate.setMonth(this.calendarDate.getMonth() + 1);
      }
    });
  }
}