No AngularJS, eu posso usar filtros (pipes) dentro de serviços e controladores usando uma sintaxe semelhante a esta:
$filter('date')(myDate, 'yyyy-MM-dd');
É possível usar tubos em serviços / componentes como este no Angular?
No AngularJS, eu posso usar filtros (pipes) dentro de serviços e controladores usando uma sintaxe semelhante a esta:
$filter('date')(myDate, 'yyyy-MM-dd');
É possível usar tubos em serviços / componentes como este no Angular?
Respostas:
Como de costume no Angular, você pode confiar na injeção de dependência:
import { DatePipe } from '@angular/common';
class MyService {
constructor(private datePipe: DatePipe) {}
transformDate(date) {
return this.datePipe.transform(date, 'yyyy-MM-dd');
}
}
Adicione DatePipe
à sua lista de provedores em seu módulo; se você esquecer de fazer isso, receberá um erro no provider for DatePipe
:
providers: [DatePipe,...]
Atualizar o Angular 6 : O Angular 6 agora oferece praticamente todas as funções de formatação usadas pelos canais publicamente. Por exemplo, agora você pode usar a formatDate
função diretamente.
import { formatDate } from '@angular/common';
class MyService {
constructor(@Inject(LOCALE_ID) private locale: string) {}
transformDate(date) {
return formatDate(date, 'yyyy-MM-dd', this.locale);
}
}
Antes do Angular 5 : esteja avisado, porém, de que ele DatePipe
estava confiando na API Intl até a versão 5, que não é suportada por todos os navegadores (verifique a tabela de compatibilidade ).
Se você estiver usando versões angulares mais antigas, adicione o Intl
polyfill ao seu projeto para evitar qualquer problema. Veja esta pergunta relacionada para uma resposta mais detalhada.
recomendamos o uso da abordagem DI de outras respostas, em vez desta abordagem
Você deve poder usar a classe diretamente
new DatePipe().transform(myDate, 'yyyy-MM-dd');
Por exemplo
var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');
Date
construtor javascript , os meses são 0
baseados. Assim 0
é janeiro e 1
fevereiro. Correção ausentey
error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'.
on-linevar formatted = new DatePipe().transform(raw, ['yyyy-MM-dd']);
@NgModule({ providers:[DatePipe] })
, em seguida, em sua classe, importação e injetar constructor( private datePipe: DatePipe ){}
Sim, é possível usando um pipe personalizado simples. A vantagem de usar canal personalizado é que, se precisarmos atualizar o formato da data no futuro, podemos atualizar um único arquivo.
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 }}
Você sempre pode usar este canal em qualquer lugar, componente, serviços etc.
Por exemplo
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);
}
Não se esqueça de importar dependências.
import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'
Recebi um erro porque o DatePipe não é um provedor, portanto não pode ser injetado. Uma solução é colocá-lo como um provedor no seu módulo de aplicativo, mas minha solução preferida foi instancia-lo.
Eu olhei para o código-fonte do DatePipe para ver como ele conseguiu o código do idioma: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174
Eu queria usá-lo dentro de um pipe, então meu exemplo está dentro de outro 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')
}
}
A chave aqui é importar Inject e LOCALE_ID do núcleo da angular e, em seguida, injetar isso para que você possa fornecê-lo ao DatePipe para instancia-lo corretamente.
No seu módulo de aplicativo, você também pode adicionar o DatePipe à sua matriz de provedores assim:
import { DatePipe } from '@angular/common';
@NgModule({
providers: [
DatePipe
]
})
Agora você pode injetá-lo no seu construtor sempre que necessário (como na resposta do cexbrayat).
Qualquer uma das soluções funcionou, não sei qual angular consideraria a mais "correta", mas optei por instanciar manualmente, pois a angular não fornecia o datepipe como um provedor.
new
aprova o pipe, você ainda precisa identificar o local. Acho toda a @Inject(LOCALE_ID) private locale: string
sintaxe complicada.
Se você não deseja fazer 'new myPipe ()' porque está injetando dependências no canal, é possível injetar componentes como provedor e usá-los sem novos.
Exemplo:
// 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);
}
}
Se você quiser usar seu pipe personalizado em seus componentes, poderá adicionar
@Injectable({
providedIn: 'root'
})
anotação no seu pipe personalizado. Em seguida, você pode usá-lo como um serviço
providedIn: 'root'
dentro do tubo ou fornecido em um módulo local onde o tubo é usado?
A partir do Angular 6, você pode importar formatDate
do @angular/common
utilitário para usar dentro dos componentes.
Foi introduzido em https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae
Eu posso ser usado como:
import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');
Embora o local precise ser fornecido
Você pode usar formatDate () para formatar a data nos serviços ou no componente ts. sintaxe:-
formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string
importe o formatDate () do módulo comum como este,
import { formatDate } from '@angular/common';
e apenas use-o na classe assim,
formatDate(new Date(), 'MMMM dd yyyy', 'en');
Você também pode usar as opções de formato predefinidas fornecidas pelo angular como este,
formatDate(new Date(), 'shortDate', 'en');
Você pode ver todas as outras opções de formato predefinidas aqui,