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

您可以像为智能属性创建类一样，我已经将环境类用于日期格式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>

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>

Answer 3

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

Rails.application.routes.draw do
 .... 
  #Comments
  post    '/post/:post_id',                                  to: 'comment#create',    as: 'new_comments'
  get     '/post/:post_id/:comment_id/edit',                 to: 'comment#edit',      as: 'edit_comment'
  put     '/post/:post_id/comment/:comment_id',              to: 'comment#update',    as: 'update_comment'
  delete  '/post/:id/:comment_id/',                          to: 'comment#destroy',   as: 'delete_comment'
  put     'like',                       to: "comment#upvote",    as: 'like'
  put     'dislike',                                         to: "comment#downvote",  as: 'dislike'


end

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

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

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

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

3 个答案: