如何在自定义指令中获取MatDatepicker关联的MatCalendar组件实例

问题原因 #

你之前的尝试失败主要有这几个原因：

1. 构造器注入MatCalendar无效：MatCalendar是MatDatepicker内部通过overlay动态渲染的子组件，不在指令的注入器层级中，无法直接注入。
2. ViewChild/ViewChildren无法捕获：MatCalendar渲染在全局overlay容器内，不属于当前组件的视图树，因此组件内的视图查询无法找到它。
3. 指令绑定位置错误：你把指令同时绑定在input和mat-datepicker上，但只有绑定在mat-datepicker元素上，才能关联到对应的MatDatepicker实例，进而访问其内部的Calendar组件。

解决方案 #

我们可以通过监听MatDatepicker的opened事件，在日历弹出后直接获取其公开的calendar属性，这是最可靠的方式：

1. 修改指令代码 #

import { Directive, OnInit, OnDestroy, Optional } from '@angular/core';
import { MatDatepicker, MatCalendar } from '@angular/material/datepicker';
import { EventEmitter, Subscription } from 'rxjs';
import { NgControl } from '@angular/forms';
import * as moment from 'moment';

@Directive({
  selector: '[acsDatePickerEvtHandler]'
})
export class DatepickerHelperDirective implements OnInit, OnDestroy {
  @Input() pickerEvtDebounceTime: number;
  @Output() keypressDateChange: EventEmitter<moment.Moment> = new EventEmitter();

  private calendar: MatCalendar<any>;
  private openedSub: Subscription;
  private selectedSub: Subscription;

  constructor(
    private datepicker: MatDatepicker<any>,
    @Optional() private baseControl: NgControl
  ) {}

  ngOnInit(): void {
    // 监听日期选择器打开事件，此时Calendar已初始化
    this.openedSub = this.datepicker.opened.subscribe(() => {
      this.calendar = this.datepicker.calendar;
      if (this.calendar) {
        // 这里可以添加自定义逻辑，比如监听日期选择事件
        this.selectedSub = this.calendar.selectedChange.subscribe(date => {
          this.keypressDateChange.emit(date);
        });
      }
    });

    // 可选：监听关闭事件，清理订阅
    this.datepicker.closed.subscribe(() => {
      this.selectedSub?.unsubscribe();
      this.calendar = null;
    });
  }

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

2. 调整模板绑定 #

只需要在mat-datepicker元素上绑定指令即可，无需绑定到input：

<mat-form-field class="date-field mat-input-row col-lg col-md col-sm-12">
  <input
    formControlName="shipDate"
    [acsFocus]="jumpFocus === 'shipDate'"
    [matDatepicker]="picker"
    matInput
    placeholder="Ship Date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker acsDatePickerEvtHandler #picker></mat-datepicker>
</mat-form-field>

说明 #

• MatDatepicker的calendar属性是Angular Material公开的API，可安全使用，版本更新时会保持兼容性（如有变更会提供迁移指南）。
• 如果你的Material版本较旧，calendar属性可能为私有（命名为_calendar），此时可以通过this.datepicker._calendar访问，但建议尽量升级到新版本使用公开API。

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