Angular 2/4在服务和组件中使用pipe道

在Angular 1中，我可以在服务和控制器中使用类似如下语法的filter（pipe道）：

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

在Angular2 / 4中可以在服务/组件中使用pipe道吗？

Answer 1

像往常一样在Angular 2中，你可以依靠dependency injection：

 import { DatePipe } from '@angular/common'; class MyService { constructor(private datePipe: DatePipe) {} transformDate(date) { this.datePipe.transform(myDate, 'yyyy-MM-dd'); } } 

将DatePipe添加到模块中的提供者列表中; 如果你忘了这样做，你会得到一个错误no provider for DatePipe ：

 providers: [DatePipe,...] 

尽pipeDatePipe目前（ DatePipe ）依赖于所有浏览器不支持的Intl API（请查看兼容性表 ），但请注意。

您应该添加Intl polyfill到您的项目，以避免任何问题。 看到这个相关的问题更详细的答案。

Answer 2

这个答案现在已经过时了

build议使用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'); 

Answer 3

是的，它可以通过使用一个简单的自定义pipe道。 使用自定义pipe道的好处是，如果我们需要将来更新date格式，请去更新单个文件。

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

你可以随时使用这个pipe道，组件，服务等

例如

 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' 

自定义pipe道示例和更多信息

Answer 4

如果你不想做'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); } }