AngularJS, ben buna benzer sözdizimi kullanarak hizmet ve denetleyicilerin içinde filtreler (borular) kullanabilirsiniz:

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

Angular'da bunun gibi servislerde / bileşenlerde boru kullanmak mümkün müdür?

Angular'da her zamanki gibi bağımlılık enjeksiyonuna güvenebilirsiniz:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

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

Ekle DatePipesizin modülünde sağlayıcılarınızın listesine; bunu yapmayı unutursanız bir hata alırsınız no provider for DatePipe:

providers: [DatePipe,...]

Açısal 6'yı Güncelle : Açısal 6 artık borular tarafından herkese açık olarak kullanılan hemen hemen tüm biçimlendirme işlevlerini sunuyor. Örneğin, artık formatDateişlevi doğrudan kullanabilirsiniz .

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

class MyService {

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

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

Açısal 5'ten önce : DatePipeTüm tarayıcılar tarafından desteklenmeyen sürüm 5'e kadar Intl API'sine bağlı olduğu konusunda uyarılmalıdır ( uyumluluk tablosunu kontrol edin ).

Eski Açısal sürümleri kullanıyorsanız, Intlherhangi bir sorundan kaçınmak için projenize çoklu dolguyu eklemeniz gerekir . Daha ayrıntılı bir cevap için bu ilgili soruya bakın .

Bu cevap şimdi modası geçmiş

bu yaklaşım yerine diğer cevaplardan DI yaklaşımı kullanmanızı tavsiye ederim

Orijinal cevap:

Sınıfı doğrudan kullanabilmelisiniz

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

Örneğin

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

Evet, basit bir özel boru kullanarak mümkündür. Özel kanal kullanmanın avantajı, gelecekte tarih biçimini güncellememiz gerektiğinde, gidip tek bir dosyayı güncelleyebilmemizdir.

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

Bu boruyu her zaman her yerde, bileşen, servis vb.

Örneğin

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

Bağımlılıkları içe aktarmayı unutmayın.

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

Özel Boru örnekleri ve daha fazla bilgi

Diğer cevaplar açısal 5'te çalışmıyor mu?

DatePipe bir sağlayıcı olmadığı için bir hata aldım, bu yüzden enjekte edilemez. Bir çözüm, onu uygulama modülünüze bir sağlayıcı olarak koymaktır, ancak tercih ettiğim çözüm bunu başlatmaktı.

Gerektiğinde örnekleyin:

Yerel ayarı nasıl aldığını görmek için DatePipe'ın kaynak koduna baktım: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Bir boru içinde kullanmak istedim, bu yüzden örneğim başka bir boru içinde:

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

Buradaki anahtar, Inject ve LOCALE_ID değerlerini açısal çekirdekten içe aktarmak ve ardından bunu düzgün bir şekilde başlatmak için DatePipe'a verebilmeniz için enjekte etmektir.

DatePipe'ı sağlayıcı yap

Uygulama modülünüzde, sağlayıcı dizinize şu şekilde DatePipe ekleyebilirsiniz:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Şimdi sadece gerektiğinde kurucunuza enjekte edebilirsiniz (cexbrayat'ın cevabı gibi).

Özet:

Her iki çözüm de işe yaradı, hangisinin bir açısal en "doğru" olarak değerlendireceğini bilmiyorum ama açısal bir sağlayıcı olarak datepipe sağlamadığı için manuel olarak başlatmayı seçtim.

Boruya bağımlılıklar enjekte ettiğiniz için 'yeni myPipe ()' yapmak istemiyorsanız, sağlayıcı gibi bileşeni enjekte edebilir ve yeni olmadan kullanabilirsiniz.

Misal:

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

Özel borunuzu bileşenlerinizde kullanmak istiyorsanız,

@Injectable({
  providedIn: 'root'
})

özel borunuza ek açıklama. Sonra bir hizmet olarak kullanabilirsiniz

Açısal 6'dan formatDateitibaren @angular/common, bileşenlerin içinde kullanmak için yardımcı programdan içe aktarabilirsiniz .

Https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae adresinden izinsiz girildi.

Ben olarak kullanılabilir:

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

Yerel ayar sağlanmasına rağmen

Hizmetlerde veya bileşenlerde tarihi biçimlendirmek için formatDate () öğesini kullanabilirsiniz. sözdizimi:-

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

formatDate () yöntemini bunun gibi ortak modüllerden içe aktarır,

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

ve sadece sınıfta böyle kullanın,

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

Bunun gibi açısal tarafından sağlanan önceden tanımlanmış format seçeneklerini de kullanabilirsiniz,

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

Önceden tanımlanmış diğer tüm format seçeneklerini burada görebilirsiniz,

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