Question

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

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

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

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

Answer 1

由于MatDatepicker和MatCalendarHeader是两个单独的组件，因此您将需要使用EventEmitter或通过使用BehaviourSubject在calendar-service.ts组件之间传递数据服务。

在此示例中，我将利用服务。首先，您可以创建一个名为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) } }的服务，该服务将用于在组件之间共享数据。在此类中，我们将使用BehaviourSubject来发出更新后的布尔值，该值指示日期选择器是否应打开或关闭。

MatCalendarHeader

在<button mat-icon-button (click)="closeCalendar()" > <mat-icon>close</mat-icon> </button>的模板上，您应该添加一个绑定到click事件的按钮，这将触发关闭日期选择器的操作

constructor(
  private calendarService: CalendarService) {
}

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

在header的component.ts上，

MatDatepicker

在使用@ViewChild('picker', { static: false}) picker; exampleHeader = ExampleHeader; constructor(private calendarService: CalendarService) {} ngOnInit() { this.calendarService.isCloseCalander.subscribe(isClose => { if (isClose) { this.picker.close(); } }); }的主要组件上，您将预订可观察对象，它将从标头组件中发出当前值。

 <androidx.cardview.widget.CardView
        android:id="@+id/cardview_btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="**onClickCardview**">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="16dp">

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/image" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text test"/>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

我已经在here上创建了完整的演示。

Answer 2

我认为您应该看看这个example。您无需使用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

Answer 3

遇到这个，我想我会分享我的发现。

根据此 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

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

3 个答案: