Angolare: utilizzare i tubi nei servizi e componenti

In AngularJS, sono in grado di utilizzare filtri (pipe) all’interno di servizi e controller utilizzando una syntax simile a questa:

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

È ansible utilizzare i tubi in servizi / componenti come questo in Angular?

Come al solito in Angular, puoi contare sull’iniezione di dipendenza:

 import { DatePipe } from '@angular/common'; class MyService { constructor(private datePipe: DatePipe) {} transformDate(date) { return this.datePipe.transform(date, 'yyyy-MM-dd'); } } 

Aggiungi DatePipe all’elenco dei tuoi fornitori nel tuo modulo; se ti dimentichi di farlo, riceverai un errore no provider for DatePipe :

 providers: [DatePipe,...] 

Aggiorna Angular 6 : Angular 6 ora offre praticamente tutte le funzioni di formattazione utilizzate dalle pipe pubblicamente. Ad esempio, ora puoi utilizzare direttamente la funzione formatDate .

 import { formatDate } from '@angular/common'; class MyService { constructor(@Inject(LOCALE_ID) private locale: string) {} transformDate(date) { return formatDate(date, 'yyyy-MM-dd', this.locale); } } 

Prima di Angular 5 : si DatePipe che DatePipe si basava DatePipe Intl fino alla versione 5, che non è supportata da tutti i browser (controllare la tabella di compatibilità ).

Se stai usando versioni angolari più vecchie, dovresti aggiungere il polyfill Intl al tuo progetto per evitare qualsiasi problema. Vedi questa domanda correlata per una risposta più dettagliata.

Questa risposta è ormai superata

consiglia di utilizzare l’approccio DI

Dovresti essere in grado di usare direttamente la class

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

Per esempio

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

Sì, è ansible utilizzando una semplice pipa personalizzata. Il vantaggio dell’utilizzo di pipe personalizzate è se abbiamo bisogno di aggiornare il formato della data in futuro, andare e aggiornare un singolo file.

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

Puoi sempre usare questa pipa ovunque, componenti, servizi ecc

Per esempio

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

Non ho dimenticato di importare le dipendenze.

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

Esempi di pipe personalizzate e maggiori informazioni

Altre risposte non funzionano in 5 angolari?

Ho ricevuto un errore perché DatePipe non è un fornitore, quindi non può essere iniettato. Una soluzione è metterla come fornitore nel modulo dell’app ma la mia soluzione preferita è stata quella di istanziarlo.

Istanziare dove necessario:

Ho guardato il codice sorgente di DatePipe per vedere come ha ottenuto il locale: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Volevo usarlo all’interno di una pipe, quindi il mio esempio è all’interno di un’altra pipe:

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

La chiave qui è l'importazione di Inject, e LOCALE_ID dal core di angular, e quindi l'iniezione in modo da poterlo dare al DatePipe per istanziarlo correttamente.

Fai DatePipe un fornitore

Nel modulo dell'app puoi anche aggiungere DatePipe al tuo array di provider in questo modo:

 import { DatePipe } from '@angular/common'; @NgModule({ providers: [ DatePipe ] }) 

Ora puoi semplicemente averlo iniettato nel tuo costruttore dove necessario (come nella risposta di cexbrayat).

Sommario:

Entrambe le soluzioni hanno funzionato, non so quale angular considererebbe più "corretto", ma ho scelto di istanziarlo manualmente poiché angular non ha fornito datepipe come provider stesso.

Se non vuoi fare ‘new myPipe ()’ perché stai iniettando dipendenze da pipe, puoi iniettare in component come provider e usarle senza nuove.

Esempio:

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

A partire da Angular 6 è ansible importare formatDate da @angular/common formatDate @angular/common utility da utilizzare all’interno dei componenti.

È stato introdotto su https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Posso essere usato come:

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

Sebbene le impostazioni internazionali debbano essere fornite