开发者问题收集

Angular - 在服务和组件中使用管道

2016-02-02
386832

在 AngularJS 中,我能够在服务和控制器内部使用过滤器(管道),使用类似这样的语法:

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

是否可以在 Angular 中像这样在服务/组件中使用管道?

3个回答

与 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 依赖于 Intl API,直到版本 5,并非所有浏览器都支持该 API(请查看 兼容性表 )。

如果您使用的是旧版 Angular,则应将 Intl polyfill 添加到您的项目中以避免出现任何问题。 请参阅此 相关问题 以获得更详细的答案。

cexbrayat
2016-02-02

这个答案现在已经过时了

建议使用其他答案中的 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');
SnareChops
2016-02-02

是的,使用简单的自定义管道即可实现。使用自定义管道的优点是,如果我们将来需要更新日期格式,我们可以去更新单个文件。

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
  transform(value: string) {
    const datePipe = new DatePipe("en-US");
    value = datePipe.transform(value, 'MMM-dd-yyyy');

    return value;
  }
}
{{currentDate | dateFormatPipe }}

您始终可以在任何地方使用此管道,组件、服务等。

例如:

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

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);
}
Prashobh
2017-04-04