Ta odpowiedź jest już nieaktualna

Zaleca się stosowanie podejścia DI

Powinieneś być w stanie używać klasy bezpośrednio

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

Na przykład

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

Tak jest to możliwe przy użyciu prostej rury niestandardowej. Zaletą korzystania z niestandardowego potoku jest to, że jeśli będziemy musieli zaktualizować format daty w przyszłości, przejdź i zaktualizuj pojedynczy plik.

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

Zawsze możesz używać tej rury w dowolnym miejscu, komponencie, usługach itp

Na przykład

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

Nie zapomnij zaimportować zależności.

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

Niestandardowe przykłady rur i więcej informacji

Inne odpowiedzi nie działają w angular 5?

Dostałem błąd, ponieważ DatePipe nie jest dostawcą, więc nie można go wstrzyknąć. Jednym z rozwiązań jest umieszczenie go jako dostawcy w module aplikacji, ale moim preferowanym rozwiązaniem było utworzenie go.

Utwórz instancję w razie potrzeby:

Spojrzałem na kod źródłowy DatePipe, aby zobaczyć, jak dostał locale: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

I wanted to use it wewnątrz rury, więc mój przykład jest w innej rurze:

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

Kluczem tutaj jest importowanie Inject i LOCALE_ID z rdzenia angular, a następnie wstrzykiwanie go, abyś mógł dać go DatePipe, aby poprawnie utworzyć instancję.

Uczyń DatePipe dostawcą

W module aplikacji możesz również dodać DatePipe do tablicy dostawców w następujący sposób:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Teraz możesz go po prostu wstrzyknąć do swojego konstruktora, gdzie jest to potrzebne (jak w cexbrayat ' s odpowiedź).

Podsumowanie:

Oba rozwiązania zadziałały, Nie wiem, które z angular uznałoby za najbardziej "poprawne", ale zdecydowałem się utworzyć instancję ręcznie, ponieważ angular nie dostarczył datepipe jako samego dostawcy.

Począwszy od Angular 6 możesz zaimportować formatDate z @angular/common narzędzia do użycia wewnątrz komponentów.

Został intruzowany w https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

I może być używany jako:

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

Chociaż locale musi być dostarczone

Jeśli nie chcesz robić 'new myPipe ()', ponieważ wstrzykiwasz zależności do pipe ' a, możesz wprowadzić w komponencie takim jak provider i używać go bez new.

Przykład:

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