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