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

在AngularJS中，我能够在服务和控制器中使用过滤器(管道)，使用类似于下面的语法:

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

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

332410 次浏览
小开

这个答案现在已经过时了

建议使用其他答案的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');
小开
最佳答案

像往常一样，在Angular中，你可以依赖依赖注入:

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


class MyService {


constructor(private datePipe: DatePipe) {}


transformDate(date) {
return this.datePipe.transform(date, 'yyyy-MM-dd');
}
}

将DatePipe添加到模块中的providers列表中;如果你忘记这样做，你会得到一个错误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，而版本5并不被所有浏览器所支持(检查兼容性表)。

如果你使用的是较旧的Angular版本，你应该将Intl polyfill添加到你的项目中以避免任何问题。 更详细的答案见this 相关的问题
小开

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

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'
小开

如果你不想使用new myPipe()，因为你正在向管道注入依赖项，你可以注入像provider这样的组件并使用而不使用new。

例子:

    // 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);
}
}
小开

其他答案在angular 5中无效?

我得到了一个错误，因为DatePipe不是一个提供者，所以它不能被注入。一个解决方案是把它作为一个提供者放在你的应用模块，但我更喜欢的解决方案是实例化它。

在需要的地方实例化它:

我查看了DatePipe的源代码，看看它是如何获得locale: 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')
}
}

这里的关键是从angular的核心导入Inject和LOCALE_ID，然后注入，这样你就可以把它给DatePipe来正确地实例化它。

使DatePipe成为提供程序

在你的app模块中，你也可以像这样将DatePipe添加到你的providers数组中:

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


@NgModule({
providers: [
DatePipe
]
})

现在你可以在需要的地方把它注入到你的构造函数中(比如在cexbrayat的答案中)。

简介:

这两种解决方案都可行，我不知道angular会认为哪一种最“正确”。但我选择手动实例化它，因为angular本身并没有提供datepipe作为提供者。

小开

从Angular 6开始，你可以从@angular/common实用程序中导入formatDate来在组件中使用。

它是在https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae引入的

I可以用作:

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

尽管必须提供locale

小开

如果想在组件中使用自定义管道，可以添加

@Injectable({
providedIn: 'root'
})

注释到自定义管道。 然后，您可以将其用作服务

小开
您可以使用formatDate()格式化服务或组件中的日期。 语法:- < / p > 
    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');

你可以在这里看到所有其他预定义的格式选项，

< a href = " https://angular。io/api/common/DatePipe" rel="nofollow noreferrer">https://angular.io/api/common/DatePipe .io/api/common/DatePipe " rel="nofollow noreferrer">https://angular.io/api/common/DatePipe


提交答案