angular - 当用户单击 mat-calendar 中的月份导航时，如何检索月份和年份值？

Question

我正在我的 Angular 项目中使用。当用户单击顶部的导航按钮更改月份时，我想捕获该事件并获取月份和年份值。

经过大量搜索，我设法获得以下代码来捕获点击事件。我无法获得月份和年份的值。如何获得？

HTML

<mat-calendar [minDate]="minDate" [maxDate]="maxDate" [dateClass]="dateClass()" [dateFilter]="futureEventFilter"
            #calendar (monthSelected)="monthSelected($event)" (selectedChange)="getDateChangedValue($event)" [(selected)]="selectedDate">
        </mat-calendar>

TS代码

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", () => {
                    //this.monthSelected($event);
                    console.log(button)
                });
            })
        }
    }

public monthSelected(date) {
        alert(date);
    }

如何调用monthSelected并检索月份和年份值？ 请在这里帮忙。

Answer 1

编辑:

你可以这样做:

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

以及 ts 文件中的 selectedChange 的处理程序:

  selectedDate: any
  logMonth($event: any) {
    this.selectedDate = $event
    console.log($event)
  }

您将在控制台中打印日期，并使用所选日期更新日历

原文:

使用mat-datepicker代替:link

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker (monthSelected)="logMonth($event)" #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

您不需要整个 ngAfterViewInit() {...} 代码块。
您只需在日期选择器中使用 (monthSelected)="logMonth($event)" ，并在 ts 文件中使用 logMonth($event) 来处理事件:

  logMonth($event: any) {
    console.log($event);
  }