У AngularJS я можу використовувати фільтри (труби) всередині служб та контролерів, використовуючи синтаксис, подібний до цього:

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

Чи можна використовувати труби в таких службах / компонентах як у Angular?

Як зазвичай в Angular, ви можете розраховувати на ін'єкцію залежності:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

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

Додайте DatePipeдо списку постачальників послуг у своєму модулі; якщо ви забудете це зробити, ви отримаєте помилку no provider for DatePipe:

providers: [DatePipe,...]

Оновлення Angular 6 : Angular 6 тепер пропонує майже всі функції форматування, які використовуються трубами публічно. Наприклад, тепер ви можете використовувати 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);
  }
}

Перед Angular 5 : Будьте попереджені, що DatePipeпокладалися на API Intl до версії 5, яка підтримується не всіма браузерами (перевірте таблицю сумісності ).

Якщо ви використовуєте більш старі версії Angular, вам слід додати Intlполіфайл до проекту, щоб уникнути будь-яких проблем. Дивіться це пов'язане питання для більш детальної відповіді.

Ця відповідь застаріла

рекомендуємо використовувати підхід DI з інших відповідей замість цього підходу

Оригінальна відповідь:

Ви повинні мати можливість використовувати клас безпосередньо

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

Наприклад

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

Так, це можливо за допомогою простої спеціальної труби. Перевагою використання спеціальної труби є те, що якщо нам потрібно буде оновити формат дати в майбутньому, ми можемо перейти і оновити один файл.

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

Ви завжди можете використовувати цю трубу в будь-якому місці, компоненті, службі тощо

Наприклад

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

Не забудьте імпортувати залежності.

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

Приклади спеціальних труб та додаткова інформація

Інші відповіді не працюють у куті 5?

Я отримав помилку, оскільки DatePipe не є постачальником, тому його не можна вводити. Одне з варіантів - це помістити його як провайдера у ваш модуль додатків, але моїм кращим рішенням було його інстанціювати.

Ігноруйте його там, де потрібно:

Я переглянув вихідний код DatePipe, щоб побачити, як він отримав локаль: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Я хотів використовувати його в трубі, тому мій приклад - в іншій трубі:

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

Ключовим тут є імпорт Inject та LOCALE_ID з ядра кута, а потім введення цього, щоб ви могли надати його DatePipe для правильного інстанції.

Зробіть DatePipe постачальником

У своєму модулі додатків ви також можете додати DatePipe до масиву своїх постачальників так:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Тепер ви можете просто ввести його у свій конструктор там, де потрібно (як у відповіді cexbrayat).

Підсумок:

Будь-яке рішення спрацювало, я не знаю, який саме кутовий вважатиме найбільш "правильним", але я вирішив створити його вручну, оскільки кутовий не надав датчіп як провайдера.

Якщо ви не хочете робити "new myPipe ()", оскільки ви вводите залежності в трубу, ви можете вводити такі компоненти, як постачальник, і використовувати без нових.

Приклад:

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

Якщо ви хочете використовувати свою власну трубу у своїх компонентах, ви можете додати її

@Injectable({
  providedIn: 'root'
})

анотація до вашої спеціальної програми. Потім ви можете використовувати його як послугу

Станом на Angular 6 ви можете імпортувати formatDateз @angular/commonутиліти для використання всередині компонентів.

Це було порушено на https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Мене можна використовувати як:

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

Хоча локаль має бути наданий

Ви можете використовувати formatDate () для форматування дати в службах або компонентах. синтаксис: -

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

імпортуйте formatDate () із такого загального модуля,

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

і просто використовувати його в такому класі,

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

Ви також можете використовувати заздалегідь задані параметри формату, надані таким же кутовим,

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

Усі інші заздалегідь задані параметри формату можна переглянути тут,

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