Переопределить угловую трубу даты по умолчанию

Question

Мне нужно переопределить форматы конвейера даты Angular 7 по умолчанию (medium, short, fullDate и т. Д.), Потому что я не хочу использовать два конвейера даты (по умолчанию и пользовательский) ), поэтому я сделал следующее, и мне было интересно, хорошая идея сделать это так:

// extend-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'date'
})
export class ExtendDatePipe extends DatePipe implements PipeTransform {
  constructor() {
    super('en-US');

    this.customDateFormats = {
      medium: '...',
      short: '...',
      fullDate: '...',
      longDate: '...',
      mediumDate: '...',
      shortDate: '...',
      mediumTime: '...',
      shortTime: '...'
    };
  }

  transform(value: any, args?: any): any {
    switch (args) {
      case 'medium':
        return super.transform(value, this.customDateFormats.medium);
      case 'short':
        return super.transform(value, this.customDateFormats.short);
      case 'fullDate':
        return super.transform(value, this.customDateFormats.fullDate);
      case 'longDate':
        return super.transform(value, this.customDateFormats.longDate);
      case 'mediumDate':
        return super.transform(value, this.customDateFormats.mediumDate);
      case 'shortDate':
        return super.transform(value, this.customDateFormats.shortDate);
      case 'mediumTime':
        return super.transform(value, this.customDateFormats.mediumTime);
      case 'shortTime':
        return super.transform(value, this.customDateFormats.shortTime);
      default:
        return super.transform(value, args);
    }
  }
}

// app.component.html
{{ someDate | date: 'medium' }} // The custom format will be displayed

Если я использую что-то вроде {{ someDate | date: 'MM/dd/yyyy' }}, оно тоже работает.

Так что, в общем, мне интересно, есть ли случай, когда это не будет работать должным образом или, может быть, есть лучший способ добиться этого, но с другой реализацией?

Answer 1

Вам не хватает некоторых функций из конвейера даты. Он имеет кроме format, а также timezone и locale как параметры .

Возможно переопределение канала по умолчанию, где тот, который добавлен 'последним', получит приоритет. Чтобы переопределить угловой канал во всем приложении, достаточно добавить свой собственный канал в массив каналов вашего корневого AppModule:

@NgModule({
  //...
  pipes: [
    //...
    ExtendDatePipe 
  ]
})
export class AppModule {}

_{примечание: раньше была константа PLATFORM_PIPES для переопределения глобальных / заданных по умолчанию каналов, но она была удалена}

Для удобства чтения и сохранения возможностей локализации и i18n, я бы просто изменил это на это .:

@Pipe({
  name: 'date'
})
export class ExtendDatePipe extends DatePipe implements PipeTransform {
  readonly customFormats = {
    medium: 'xxx',
    short: 'xxx',
    // ...
  };

  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(value: any, format = 'mediumDate', timezone?: string, locale?: string): string {
    format = this.customFormats[format] || format;

    return super.transform(value, format, timezone, locale);
  }
}