Angular-在服务和组件中使用管道

#1 楼

 import { DatePipe } from '@angular/common';

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}
 

 providers: [DatePipe,...]
 

 import { formatDate } from '@angular/common';

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}
 

#2 楼

 new DatePipe().transform(myDate, 'yyyy-MM-dd');
 

 var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');
 

#3 楼

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

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM-dd-yyyy');
        return value;
    }
}

{{currentDate | dateFormatPipe }}
 

 export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}
  
别忘了导入依赖项。
 
 import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'
 
 
自定义管道示例和更多信息

评论
这没有回答如何在组件或服务中使用管道的问题。



 –符合POSIX

 17年4月4日在22:00 
如果您将更新答案以不包括有关如何创建管道的信息，那么我将删除我的下注。这个问题与如何创建它们无关。



 –符合POSIX

 17年4月13日在21:17 
兼容@POSIX正如我在回答中提到的那样，它可以通过使用自定义管道非常容易地重用和更新。它可能对其他人有帮助。投票是次要的。



 – prashobh

 17年4月14日在15:58



 
这是一个公平的观点，尽管我仍然认为至少首先要回答这个特定问题是有意义的。取消不赞成投票。感谢您的回答和答复。



 –符合POSIX

 17-4-14在19:42



 
您为什么要硬编码“ en-US”？你不应该以某种方式注入吗？



 –盖尔曼

 17年9月25日在16:34 

#4 楼

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

    @Pipe({
        name: 'when',
    })
    export class WhenPipe implements PipeTransform {
        static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
        datePipe: DatePipe;

        constructor(@Inject(LOCALE_ID) private locale: string) {
            this.datePipe = new DatePipe(locale);
        }
        transform(value: string | Date): string {
            if (typeof(value) === 'string')
                value = new Date(value);

            return this.datePipe.transform(value, value < WhenPipe.today ? 'MMM d': 'shortTime')
        }
    }
 

#5 楼

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

#6 楼

@Injectable({
  providedIn: 'root'
})

#7 楼

     // In your component...

    import { Component, OnInit } from '@angular/core';
    import { myPipe} from './pipes';

    @Component({
      selector: 'my-component',
      template: '{{ data }}',
      providers: [ myPipe ]
    })
    export class MyComponent() implements OnInit {
      data = 'some data';
      constructor(private myPipe: myPipe) {}

      ngOnInit() {
        this.data = this.myPipe.transform(this.data);
      }
    }
 

#8 楼

     formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string
 

     import { formatDate } from '@angular/common';
 

     formatDate(new Date(), 'MMMM dd yyyy', 'en');
 

     formatDate(new Date(), 'shortDate', 'en');