如何向自定义 mat-datepicker-header 添加关闭按钮

Question

我正在使用 Angular 材料中的这个 UI 组件。

https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header

我想在自定义标题中添加关闭按钮，但似乎还不可能。

至少我想从日期选择器标题组件获取输出事件。

Answer 1

由于MatDatepicker和MatCalendarHeader是两个独立的组件，因此您需要使用EventEmitter、 或通过BehaviourSubject使用服务在组件之间传递数据。

对于这个例子，我将使用一个服务。首先，您可以创建一个名为 的服务calendar-service.ts，它将用于在组件之间共享数据。在此类中，我们将使用BehaviourSubject发出更新的布尔值，该值将指示日期选择器是否应该打开或关闭。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class CalendarService {

  closeCalendarSource = new BehaviorSubject<boolean>(false);
  isCloseCalander = this.closeCalendarSource.asObservable();

  constructor() { }

  closeCalander(message: boolean) {
    this.closeCalendarSource.next(message)
  }

}

在您的模板上MatCalendarHeader，您应该添加一个绑定到单击事件的按钮，这将触发关闭日期选择器的操作

<button mat-icon-button (click)="closeCalendar()" >
  <mat-icon>close</mat-icon>
</button>

在 header 的 component.ts 上，

constructor(
  private calendarService: CalendarService) {
}

closeCalendar() {
  this.calendarService.closeCalander(true);
}

在使用 的主组件上MatDatepicker，您将订阅 observable，它将从标头组件发出当前值。

@ViewChild('picker', { static: false}) picker;
exampleHeader = ExampleHeader;

constructor(private calendarService: CalendarService) {}

ngOnInit() {
  this.calendarService.isCloseCalander.subscribe(isClose => {
    if (isClose) {
      this.picker.close();
    }
  });
}

我在这里创建了完整的演示。