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

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

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


当前回答

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

@Injectable({
  providedIn: 'root'
})

注释到自定义管道。 然后,您可以将其作为一项服务使用

其他回答

其他答案在angular 5中无效?

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

在需要的地方实例化它:

我查看了DatePipe的源代码,看看它是如何获得区域设置的: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中,你可以依赖依赖注入:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

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

将DatePipe添加到模块中的提供者列表中;如果你忘记这样做,你会得到一个错误没有提供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,这不是所有浏览器都支持的(查看兼容性表)。

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

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

@Injectable({
  providedIn: 'root'
})

注释到自定义管道。 然后,您可以将其作为一项服务使用

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

例子:

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

这个答案现在已经过时了

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