如何捕获Angular mat calendar 头部左右箭头的点击事件

方案1：使用官方提供的viewChanged输出事件（推荐） #

mat-calendar自带viewChanged事件，每次日历视图（月/年/多年范围）发生变更时都会触发，点击左右箭头切换视图也会触发该事件，无需依赖组件内部结构，兼容性更强。

代码示例 #

模板代码：

<mat-calendar 
  [selected]="selectedDate"
  (viewChanged)="onCalendarViewChange($event)"
></mat-calendar>

组件TS代码：

import { Component } from '@angular/core';
import { MatCalendarViewChange } from '@angular/material/datepicker';

@Component({
  selector: 'app-datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample {
  selectedDate = new Date();

  onCalendarViewChange(event: MatCalendarViewChange<Date>) {
    // event参数包含切换后的视图信息：
    // event.view：当前视图类型，取值为'month' | 'year' | 'multi-year'
    // event.activeDate：切换后视图的基准日期
    console.log('日历视图已变更', event);
    // 此处补充你的自定义逻辑
  }
}

如果需要区分是向前切换还是向后切换，可以存储上一次的activeDate，和本次返回的日期做大小对比即可判断。

方案2：原生元素事件监听 #

如果需要精确区分点击的是左箭头还是右箭头，可以直接给箭头元素绑定点击事件，实现更细粒度的监听。

代码示例 #

模板代码：

<mat-calendar #calendarRef [selected]="selectedDate"></mat-calendar>

组件TS代码：

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample implements AfterViewInit, OnDestroy {
  selectedDate = new Date();
  private prevClickListener: () => void;
  private nextClickListener: () => void;

  @ViewChild('calendarRef', { read: ElementRef }) calendarRef: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    // 查找左右箭头DOM元素
    const prevBtn = this.calendarRef.nativeElement.querySelector('.mat-calendar-previous-button');
    const nextBtn = this.calendarRef.nativeElement.querySelector('.mat-calendar-next-button');

    // 定义监听逻辑
    this.prevClickListener = () => {
      console.log('左侧箭头被点击');
      // 此处补充左箭头点击的自定义逻辑
    };
    this.nextClickListener = () => {
      console.log('右侧箭头被点击');
      // 此处补充右箭头点击的自定义逻辑
    };

    // 绑定事件
    prevBtn?.addEventListener('click', this.prevClickListener);
    nextBtn?.addEventListener('click', this.nextClickListener);
  }

  ngOnDestroy() {
    // 组件销毁时移除事件监听，避免内存泄漏
    const prevBtn = this.calendarRef.nativeElement.querySelector('.mat-calendar-previous-button');
    const nextBtn = this.calendarRef.nativeElement.querySelector('.mat-calendar-next-button');
    prevBtn?.removeEventListener('click', this.prevClickListener);
    nextBtn?.removeEventListener('click', this.nextClickListener);
  }
}

注意：该方案依赖Angular Material组件的内部CSS类名，如果后续升级框架版本，需要确认类名是否有变更，做好兼容处理。

内容的提问来源于stack exchange，提问作者vivek