W AngularJS jestem w stanie używać filtrów (potoków) wewnątrz usług i kontrolerów przy użyciu składni podobnej do tej:

$filter('date')(myDate, 'yyyy-MM-dd');

Czy można używać rur w takich usługach / komponentach w Angular?

Jak zwykle w Angular, możesz polegać na wstrzykiwaniu zależności:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

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

Dodaj DatePipedo listy dostawców w swoim module; jeśli zapomnisz to zrobić, pojawi się błąd no provider for DatePipe:

providers: [DatePipe,...]

Aktualizacja Angular 6 : Angular 6 oferuje teraz prawie wszystkie funkcje formatowania używane publicznie przez potoki. Na przykład możesz teraz używać tej formatDatefunkcji bezpośrednio.

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

class MyService {

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

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

Przed Angularem 5 : Ostrzegam jednak, że DatePipepolegał on na Intl API aż do wersji 5, która nie jest obsługiwana przez wszystkie przeglądarki (sprawdź tabelę kompatybilności ).

Jeśli używasz starszych wersji IntlAngulara, dodaj do swojego projektu wypełnienie wieloskładnikowe, aby uniknąć problemów. Zobacz to powiązane pytanie, aby uzyskać bardziej szczegółową odpowiedź.

Ta odpowiedź jest teraz nieaktualna

zalecam stosowanie podejścia DI z innych odpowiedzi zamiast tego podejścia

Oryginalna odpowiedź:

Powinieneś mieć możliwość bezpośredniego korzystania z klasy

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 niestandardowej potoku. Zaletą korzystania z potoku niestandardowego jest to, że jeśli będziemy musieli zaktualizować format daty w przyszłości, możemy przejść i zaktualizować 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ć tego potoku 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 kanciastym 5?

Wystąpił 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 go w razie potrzeby:

Przejrzałem kod źródłowy DatePipe, aby zobaczyć, w jaki sposób uzyskał ustawienia regionalne: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Chciałem użyć go w rurze, więc mój przykład znajduje się 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 import Inject i LOCALE_ID z rdzenia kątowego, a następnie wstrzyknięcie tego, aby można go było przekazać DatePipe w celu prawidłowego utworzenia instancji.

Ustaw DatePipe jako 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 po prostu wstrzyknąć go do konstruktora tam, gdzie jest to potrzebne (jak w odpowiedzi cexbrayat).

Podsumowanie:

Oba rozwiązania działały, nie wiem, który kąt byłby uważany za najbardziej „poprawny”, ale zdecydowałem się utworzyć go ręcznie, ponieważ kątownik nie dostarczył potoku daty jako sam dostawca.

Jeśli nie chcesz robić „new myPipe ()”, ponieważ wstrzykujesz zależności do potoku, możesz wprowadzić komponent taki jak dostawca i używać go bez nowego.

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

Jeśli chcesz użyć niestandardowej rury w swoich komponentach, możesz dodać

@Injectable({
  providedIn: 'root'
})

adnotacja do potoku niestandardowego. Następnie możesz użyć go jako usługi

Jak kątowych 6 można importować formatDatez@angular/common narzędzia do użycia wewnątrz komponentów.

Zostało to wprowadzone na https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Mogę być używany jako:

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

Chociaż należy podać ustawienia regionalne

Możesz użyć formatDate (), aby sformatować datę w usługach lub komponencie ts. składnia:-

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

zaimportuj formatDate () ze wspólnego modułu takiego jak ten,

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

i po prostu użyjcie go w takiej klasie,

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

Możesz również użyć predefiniowanych opcji formatu udostępnianych przez angular w ten sposób,

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

Tutaj możesz zobaczyć wszystkie inne predefiniowane opcje formatu,

https://angular.io/api/common/DatePipe