如何订阅MatCalendar activeDate变量?显示模板中当前活动日期的月份和年份标签

Question

我是Angular的新手。我正在尝试构建一个带有自定义标头的日期选择器。我传递了垫子日历组件的自定义标题。参考：https://material.angular.io/components/datepicker/overview#customizing-日历标题

现在，我想在标题中显示当前活动日期的月份。

**.html

{{ monthLabel }}

**.ts

monthLabel = this.getMonthLabel()
months = ['Jan','Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dev'];
private getMonthLabel(){
return this.months[this.dateAdapter.getMonth(this.calendar.activeDate)];
}

当用户在日期选择器中选择其他月份时，monthLabel不会更新。如何做到这一点？我想用| async来解决它。请有人指导我实现这一点吗？

Answer 1

为什么您的代码不起作用：

您只调用函数getMonthLabel()一次：当您将结果分配给monthLabel时。

尝试以下操作：

monthLabel$ = new Subject<string>()
months = ['Jan','Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dev'];
private setMonth(date: Date | null){
this.monthLabel$.next(date ? this.months[date.getMonth()] : '');
}

以及在您的HTML 中

{{ monthLabel$ | async }}
...
<mat-calender (selectedChange)="setMonth">
...