覆盖 Angular 默认日期管道 [英] Override Angular default date pipe

问题描述

我需要覆盖默认的 Angular 7 日期管道格式(medium、short、fullDate 等)，因为我不我想使用两个日期管道(默认一个和一个自定义一个)，所以我做了以下内容并且想知道这样做是个好主意:

I need to override the default Angular 7 date pipe formats (medium, short, fullDate, etc.), because I don't want to use two date pipes (the default one and a custom one), so I made the following and was wondering is a good idea to do it like so:

// 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 |日期:'MM/dd/yyyy' }} 它也能正常工作.

If I use something like {{ someDate | date: 'MM/dd/yyyy' }} it works as well.

所以基本上，我想知道是否存在这种情况无法正常工作的情况，或者可能有更好的方法来实现这一点，但实现方式不同?

So basically, I'm wondering is there a case where this will not work properly or maybe there is a better way to achieve this, but with different implementation?

推荐答案

您错过了日期管道的某些功能.除了 format，还有 timezone 和 locale 作为 参数.

You are missing out on some functionality from the date pipe. It has besides format, also timezone and locale as parameters.

覆盖默认管道是可能的，最后"添加的管道将获得优先级.要覆盖整个应用程序中的角度管道，只需将自定义管道添加到根 AppModule 的声明数组中即可:

Overriding a default pipe is possible, where the one which is added 'last' will get priority. To override an angular pipe throughout the app, it's enough to add your custom pipe to the declarations array of your root AppModule:

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

_{注意:曾经有一个 PLATFORM_PIPES 常量来覆盖全局/默认管道，但这是 已删除}

_{note: there used to be a PLATFORM_PIPES constant to override global/default pipes, but this has been removed}

为了可读性并保持本地化和 i18n 的可能性，我只是将其更改为这个.:

For readability and to keep localization and i18n possibilities, I would just change it to this though.:

@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);
  }
}

这篇关于覆盖 Angular 默认日期管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！