[英]How to add close button to customized mat-datepicker-header
我正在使用来自 Angular 材料的这个 UI 组件。
https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header
我想在自定义标题中添加关闭按钮,但似乎还不可能。
至少我想从日期选择器标题组件中获取输出事件。
由于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>
并在标题的 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
遇到了这个,并认为我会分享我的发现。
根据this github issue ,添加了一个fork,以便您可以将组件用作包装器,因此,您将获得组件的所有简洁功能。
要利用这一点,您的模板非常简单
<mat-calendar-header>
<button>TODAY</button>
</mat-calendar-header>
这是我的 stackblitz 的链接,示例如下: https ://stackblitz.com/edit/mat-datepicker-today-button?file = src/main.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.