Angular 2 - 动态更新自定义 MAT_DATE_FORMATS

Question

我正在使用一个处理日期的Angular9应用程序。它显示并更新多个<mat-datepicker>字段。

我正在使用https://www.npmjs.com/package/@angular/material-moment-adapter 中的自定义MAT_DATE_FORMATS和MomentDateAdapter( @angular/material-moment-adapter) 。

我正在使用以下代码可以正常工作：

export const APP_MOMENT_DATE_FORMATS =
{    
  parse: {},
  display: {
    dateInput: 'YYYY/MM/DD/MM',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

//..
providers: [
  {
     provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
  },
  {
    provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]
  }
]
// ..

Stackblitz 演示：https ://stackblitz.com/edit/angular-formatted-datepicker-vdtaqj ? file = app%2Fdatepicker-overview-example.ts

现在，我想知道我是否可以APP_MOMENT_DATE_FORMATS.display.dateInput 动态更新值- 例如：它可能是通过 http 请求从配置服务设置的，或者我可能会在界面中显示一个选择器。

例子：

export const APP_MOMENT_DATE_FORMATS =
  {  
    // ..  
    display: {
     dateInput: this.appService.dateInputFormat,
     // ..
   }
  };

我知道我可以实现自定义日期适配器，如下所述：Angular 2 Material 2 datepicker date format。

但我想知道是否有另一种方法可以做到这一点，而无需实现新的自定义日期适配器。

谢谢。

Answer 1

在花了几个小时寻找解决方案后，我通过简单地注入 MAT_DATE_FORMATS 并动态更改它来提出以下解决方案：

const APP_MOMENT_DATE_FORMATS =
{
    parse: {
    dateInput: 'MM/DD/YYYY',
    },
    display: {
    dateInput: 'MM/DD/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
    }
};

@Component({
...  
providers: [
    {
    provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
    },
    {
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [MAT_DATE_LOCALE]
    }
]
})

export class DatePickerComponent implements OnInit, OnDestroy {

constructor(@Inject(MAT_DATE_FORMATS) public data: any) {
    data.parse.dateInput = 'DD/MM/YYYY'
    data.display.dateInput = 'DD/MM/YYYY'
  }
}

Answer 2

不太确定如何在运行时更新提供程序的值，但有解决方法可以在组件级别提供不同的MAT_DATE_FORMATS值。mat-datepicker

正如Angular 文档中提到的：

同一元素上的组件和指令共享一个注入器。

将customPickerFormats具有不同提供者的指令放入包装MAT_DATE_FORMATS中。mat-form-fieldmat-datepicker

在 directice.ts 中：

import { Directive } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';

@Directive({
  selector: '[appCustomPickerFormats]',
  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: 'DD/MM',
        },
        display: {
          dateInput: 'Do MMMM',
          monthYearLabel: 'MMM',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      },
    },
  ],
})
export class CustomPickerFormatsDirective {}

在组件.ts中：

<mat-form-field appCustomPickerFormats>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="customPicker">
  <mat-datepicker-toggle matSuffix [for]="customPicker"></mat-datepicker-toggle>
  <mat-datepicker #customPicker></mat-datepicker>
</mat-form-field>

第一个mat-datepicker没有指令的默认情况下将使用MAT_DATE_FORMATS您为 HostComponent 或组件所在的模块设置的任何值。

这里有一个有效的 stackblitz 示例。