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

ДоDatePipe версии Angular 5 : Имейте в виду, что до версии 5 использовался API-интерфейс Intl, который поддерживается не всеми браузерами (см. Таблицу совместимости ).

Если вы используете более старые версии 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 из ядра angular, а затем инъекция, чтобы вы могли передать его DatePipe для его правильной реализации.

Сделать DatePipe провайдером

В вашем модуле приложения вы также можете добавить DatePipe в ваш массив провайдеров следующим образом:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Теперь вы можете просто вставить его в ваш конструктор, где это необходимо (как в ответе cexbrayat).

Резюме:

Любое решение сработало, я не знаю, какой из угловых будет считать наиболее «правильным», но я решил создать его вручную, поскольку angular не предоставлял datepipe в качестве самого провайдера.

Если вы не хотите делать 'new myPipe ()', потому что вы вводите зависимости в pipe, вы можете внедрить в компонент, такой как поставщик, и использовать без нового.

Пример:

// 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 () для форматирования даты в службах или компонентах ts. синтаксис:-

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

Вы также можете использовать предопределенные параметры формата, предоставляемые angular, как это,

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

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

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