我如何创建 Angular 自定义日期管道

Question

我正在处理 angular 5 我想创建一个自定义日期管道，允许我从日期中减去一些天数：

这是我显示日期值的方式：

 <span>{{data.nextCertificateUpdate | date:'yyyy-MM-dd'}}</span>  

例如，这显示一个值，如：2018-08-29

我问是否可以创建一个管道，允许我从这个日期减去天数，例如 28 天？

就像是 ：

<span>{{data.nextCertificateUpdate | mypipe:28 }}</span>  

这应该显示如下值：2018-08-01

谢谢你的帮助

Answer 1

除了上面 Sachila 给出的不错的答案之外，您还可以在自定义管道本身中实现全部功能。

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({ name: 'mypipe' })
export class Mypipe implements PipeTransform {
  // adding a default format in case you don't want to pass the format
  // then 'yyyy-MM-dd' will be used
  transform(date: Date | string, day: number, format: string = 'yyyy-MM-dd'): string {
    date = new Date(date);  // if orginal type was a string
    date.setDate(date.getDate()-day);
    return new DatePipe('en-US').transform(date, format);
  }
}

并使用您的自定义管道，例如：

<span>{{data.nextCertificateUpdate | mypipe: 28: 'yyyy-MM-dd'}}</span>

在此处查看工作示例：https : //stackblitz.com/edit/angular-995mgb?file=src%2Fapp%2Fapp.component.html

Answer 2

您可以为属性创建类，就像我已将环境类用于日期格式 DATE_FORMAT 并默认分配 dd-MM-yyyy 格式并在日期管道中使用。通过这种方法只更改 DATE_FORMAT 的值，我们可以轻松地更改其他地方的日期格式。

import { Pipe, PipeTransform } from '@angular/core';
import { environment } from "../../../../environments/environment";
import { DatePipe } from "@angular/common";

@Pipe({
  name: 'dateFormat'
})


export class DateFormatPipe extends DatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(Object.keys(environment).indexOf("DATE_FORMAT") >= 0){
      return super.transform(value, environment.DATE_FORMAT);
    }

    return super.transform(value, 'dd-MM-yyyy');
}

html

<span>{{ data.date | dateFormat }}</span>