材料Datepicker更改月视图事件

Question

是否有任何方法可以检测该日历是否已加载新的月份视图，当＆＃34;黄色按钮＆＃34; （见截图）使用？

Answer 1

您可以使用Renderer2监听日历上那些按钮的单击事件。

来自this blog post的代码。

constructor( private renderer: Renderer2g) { }

ngAfterViewInit() {
    let buttons = document.querySelectorAll('mat-calendar .mat-calendar-previous-button,' +
        'mat-calendar .mat-calendar-next-button');

    if (buttons) {
        Array.from(buttons).forEach(button => {
            this.renderer.listen(button, "click", () => {
                console.log("Month changed");
            });
        })
    }
}

Answer 2

您可以将自己的标题组件与所需的任何按钮和事件一起使用：

<mat-calendar [headerComponent]="headerComponent"></mat-calendar>

并在.ts中声明变量headerComponent：

public headerComponent = MyCoolHeaderComponent;

您将必须为标题提供自己的UI和功能（在MyCoolHeaderComponent类中）。

Answer 3

MatDatepicker 组件使用 DateAdapter 服务处理日期，当您单击下一个或上一个按钮时，会在 MatCalendarHeader 组件上运行一个处理程序，此处理程序调用 addCalendarMonths 方法在 DateAdapter 上（如果当前视图为 month），因此如果您在 DateAdapter 服务上临时修补此功能，您可以做任何您喜欢的事情，例如：

1. 在父组件中

origAddCalendarMonths: any
constructor(@Optional() private _dateAdapter: DateAdapter<any>) { }

onOpenedStream() {
   this.origAddCalendarMonths = this._dateAdapter.addCalendarMonths
   this._dateAdapter.addCalendarMonths = (...args) => {
     console.log('!!!')
     // your logic
     return this.origAddCalendarMonths.apply(this._dateAdapter, args)
   }
}

onClosedStream() {
    this._dateAdapter.addCalendarMonths = this.origAddCalendarMonths
}

ngOnDestroy() {
    this.onClosedStream()
}

或者，如果您改用 MatCalendar，您可以在父组件提供程序中提供来自 DateAdapter 的一些扩展类，以便为该组件的所有子组件（DateAdapter 提供该类作为 NodeInjector }})