Как я могу создать Angular Custom Date Pipe

Question

Я работаю над углом 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

Создайте пользовательский канал вызова mypipe

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

@Pipe({ name: 'mypipe' })
export class Mypipe implements PipeTransform {
  transform(date: Date, day: number): string {
    date.setDate(d.getDate()-day);
    return date;
  }
}

называйте это так

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