我正在使用来自 Angular 材料的这个 UI 组件。
https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header
我想在自定义标题中添加关闭按钮,但似乎还不可能。
至少我想从日期选择器标题组件中获取输出事件。
我正在使用来自 Angular 材料的这个 UI 组件。
https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header
我想在自定义标题中添加关闭按钮,但似乎还不可能。
至少我想从日期选择器标题组件中获取输出事件。
由于MatDatepicker
andMatCalendarHeader
是两个独立的组件,您将需要使用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();
}
});
}
我在这里创建了完整的演示。
我想你应该看看这个例子。您应该能够在没有calendarService
. 基本上,您可以在构造函数中抓住父日期选择器组件:
constructor(
private datePicker: MatDatepicker<D>,
private calendar: MatCalendar<D>,
private dateAdapter: DateAdapter<D>,
@Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
cdr: ChangeDetectorRef,
) {
this.calendar.stateChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => cdr.markForCheck());
}
我将它与 HTML 中的今天按钮一起使用:
<button
mat-icon-button
class="todayButton"
(click)="todayClicked()"
matTooltip="Select today"
>
{{ today }}
</button>
然后调用该方法,this.datePicker.close()
将关闭日历弹出窗口:
todayClicked() {
this.calendar.activeDate = this.dateAdapter.today();
this.calendar._dateSelected(this.calendar.activeDate);
this.datePicker.select(this.dateAdapter.today());
this.datePicker.close();
}
由原始创建者提供:@tabuckner
遇到这个,我想我会分享我发现的。
根据这个github 问题,添加了一个 fork,以便您可以将组件用作包装器,因此,您将获得组件的所有简洁功能。
要利用它,您的模板很简单
<mat-calendar-header>
<button>TODAY</button>
</mat-calendar-header>
这是我的 stackblitz 的链接示例:https ://stackblitz.com/edit/mat-datepicker-today-button?file=src/main.ts