mat-calendar首次点击日期返回undefined，点击后如何关闭组件

问题1：首次点击日期返回undefined，第二次点击正常 #

问题原因 #

你将selectedChange事件的订阅逻辑写在了click事件的回调函数内，首次触发点击时才刚刚完成订阅，无法捕获本次点击触发的selectedChange事件返回值，所以首次打印为undefined。且该写法会导致每次点击都新增一个订阅，存在内存泄漏风险。

解决方案 #

直接在模板中绑定selectedChange事件替代click事件，不需要手动订阅。
修正后代码如下：
file.html

<mat-calendar (selectedChange)="onSelectDate($event)" #picker></mat-calendar>

file.ts

public onSelectDate(selectedDate: Date | null): void {
    console.log(selectedDate);
    // 此处添加你的业务逻辑
}

修改后首次点击就能正常获取选中的日期值。 #

问题2：点击日期后关闭mat-calendar组件 #

根据你的使用场景有两种实现方案：

• 如果你是搭配mat-datepicker使用mat-calendar，直接调用datepicker实例的close()方法即可：
  示例代码：

  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker>
    <mat-calendar (selectedChange)="onSelectDate($event, picker)"></mat-calendar>
  </mat-datepicker>
  

  import { MatDatepicker } from '@angular/material/datepicker';
  
  public onSelectDate(selectedDate: Date | null, picker: MatDatepicker<Date>): void {
    console.log(selectedDate);
    picker.close();
  }
  

• 如果你是单独使用mat-calendar组件，通过布尔变量控制组件的显示隐藏即可：
  示例代码：

  <button (click)="showCalendar = true">打开日期选择器</button>
  <mat-calendar *ngIf="showCalendar" (selectedChange)="onSelectDate($event)"></mat-calendar>
  

  public showCalendar = false;
  
  public onSelectDate(selectedDate: Date | null): void {
    console.log(selectedDate);
    this.showCalendar = false;
  }
  

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