Angular Material Calendar日历组件提供了一个向前和向后箭头的头部,在切换月份时使用。如果需要检测用户单击这些箭头的事件,则需要订阅MatCalendarHeader中的monthSelected事件。
示例代码如下:
HTML模板:
组件代码:
import { Component, ViewChild } from '@angular/core';
import { MatCalendar } from '@angular/material/datepicker';
import { MatCalendarHeader } from '@angular/material/datepicker';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent {
@ViewChild(MatCalendar) calendar: MatCalendar;
@ViewChild(MatCalendarHeader) header: MatCalendarHeader;
onMonthSelected(date: Date) {
// handle month selection event
}
ngAfterViewInit() {
this.header.monthSelected.subscribe((date: Date) => this.onMonthSelected(date));
}
}