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

Question

在 AngularJS 中，我可以使用类似于以下语法的服务和 Controller 内部的过滤器(管道):

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

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

Answer 1

像在 Angular 中一样，您可以依赖依赖注入(inject):

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 在版本 5 之前依赖于 Intl API，但并非所有浏览器都支持它(查看 compatibility table ).

如果您使用的是较旧的 Angular 版本，则应将 Intl polyfill 添加到您的项目中以避免出现任何问题。看这个related question以获得更详细的答案。