Угловой материал DatePicker нестандартного формата

Question

Я создал пользовательскую директиву для добавления функций в существующий элемент управления matDatePicker.Эта директива имеет атрибут Input, называемый format, который дает формат даты во время выполнения.Я предоставил MyDateAdapter как упоминание в формате даты Angular 2 Material 2

Мой вопрос;как я могу установить значение входного формата в формат даты DatePicker во время выполнения, как когда мое значение формата изменилось.

Моя директива:

@Directive({
  selector: '[dateFormat]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: DateFormatDirective,
      multi: true
    },
    {
      provide: DateAdapter, useClass: MyDateAdapter
    },
    {
      provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
    }
  ]
})
export class DateFormatDirective {
  @Input('dateFormat') format: string;
}

Класс MyDateAdapter и константа MY_DATE_FORMATS относятся

Answer 1

Изучив материал DatePicker и исходный код NativeDateAdapter, я нашел решение для вышеуказанной проблемы.

Изменить MyDateAdapter

import {TranslateService} from '@ngx-translate/core';
export class MyDateAdapter  extends NativeDateAdapter {
    format:string;
    constructor( private datepipe: DatePipe,  platform: Platform,translate: TranslateService) {
        super('en', platform);
        translate.get('dateFormat').subscribe(ts =>{ 
             this.format=dateFormat;
        });
    }
    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            return this.datepipe.transform(date, this.format);
        } else {
            return date.toDateString();
        }
    }
}

Добавить заводскую функцию:

export function createDateAdapterLoader (dp: DatePipe,  platform: Platform,ts: TranslateService) {
  return new MyDateAdapter(dp,  platform, ts);
}

изменить директиву:

    import {TranslateService} from '@ngx-translate/core';
    import {DatePipe} from '@angular/common';
    import {Platform} from '@angular/cdk/platform';
    @Directive({
      selector: '[dateFormat]',
      providers: [
        {
          provide: NG_VALIDATORS,
          useExisting: DateFormatDirective,
          multi: true
        },
        {
          provide: DateAdapter,
          useFactory: createDateAdapterLoader,
          deps: [DatePipe, Platform ,TranslateService]
        },
        {
          provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
        }
      ]
    })
    export class DateFormatDirective {
      @Input('dateFormat') format: string;
    }

Вам необходимо предоставить DatePipe в AppModule.

Это называется провайдером Factory длясоздать зависимое значение динамически !! см.

Чтобы получить значение формата из файла i18n, вы можете использовать любую библиотеку интернационализации (i18n), например: @ ngx-translate