Angular mat-datepicker单月视图切换月份时如何触发事件获取当前月份

解决方案：自定义指令扩展月份导航事件 #

我们可以通过封装自定义属性指令，监听Angular Material Datepicker内部的状态变化，实现单月/多月视图下统一的月份切换事件通知：

第一步：创建monthNavigated指令 #

import { Directive, Output, EventEmitter, OnDestroy } from '@angular/core';
import { MatDateRangePicker } from '@angular/material/datepicker';
import { Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';

@Directive({
  selector: 'mat-date-range-picker[monthNavigated]'
})
export class MonthNavigatedDirective<D = Date> implements OnDestroy {
  @Output() monthNavigated = new EventEmitter<D>();
  private sub: Subscription;
  private lastEmitMonth: string | null = null;

  constructor(picker: MatDateRangePicker<D>) {
    // 订阅选择器状态变化流
    this.sub = picker.stateChanges
      .pipe(startWith(null))
      .subscribe(() => {
        const currentActiveDate = picker['_calendar']?.activeDate;
        if (!currentActiveDate) return;
        // 格式化月份标识，避免同一月份多次触发
        const monthKey = `${currentActiveDate.getFullYear()}-${currentActiveDate.getMonth()}`;
        if (monthKey !== this.lastEmitMonth) {
          this.lastEmitMonth = monthKey;
          // 输出当前月份的第一天
          const firstDayOfMonth = new Date(currentActiveDate.getFullYear(), currentActiveDate.getMonth(), 1) as unknown as D;
          this.monthNavigated.emit(firstDayOfMonth);
        }
      });
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe();
  }
}

第二步：在模块中声明指令 #

在你的对应模块的declarations数组中加入MonthNavigatedDirective即可。

第三步：模板中直接使用 #

和你预期的用法完全一致：

<mat-date-range-picker (monthNavigated)="monthChanged($event)"></mat-date-range-picker>

组件逻辑也不需要改动：

async monthChanged(date: Date){
  // 获取当前视图月份的起始日期
  this.allowedDates = await this.apiService.getAllowedDatesForMonth(date);
}

注意事项 #

• 该实现兼容单月/多月视图，无论是点击前进后退按钮切换月份，还是在多月视图直接选择月份，都会触发事件
• 内部加了月份去重逻辑，避免同一月份重复触发接口请求
• 不需要修改Angular Material源码，侵入性极低

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