这个答案现已过时

Question

在AngularJS中，我能够使用与此类似的语法在服务和控制器中使用过滤器（管道）：

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

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

Answer 1

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

如果您使用较旧的Angular版本，则应将Intl polyfill添加到项目中以避免任何问题。有关更详细的答案，请参阅此related question。

Answer 2

这个答案现已过时

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

是的，可以使用简单的自定义管道。使用自定义管道的好处是，如果我们将来需要更新日期格式，我们可以更新单个文件。

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'

Custom Pipe examples and more info

Answer 4

其他答案不适用于角度5？

我收到错误，因为DatePipe不是提供者，因此无法注入。一种解决方案是将其作为应用程序模块中的提供程序，但我首选的解决方案是实例化它。

在需要的地方实例化：

我查看了DatePipe的源代码，了解它是如何获得语言环境的：https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

我想在管道中使用它，所以我的例子在另一个管道中：

###
#   Database Settings
###
spring.datasource.url=jdbc:h2:mem:omniva;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE
spring.datasource.platform=h2
spring.datasource.username = sa
spring.datasource.password =
spring.datasource.driverClassName = org.h2.Driver
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.jpa.show-sql = true

###
#   H2 Settings
###
spring.h2.console.enabled=true
spring.h2.console.path=/console
spring.h2.console.settings.trace=false
spring.h2.console.settings.web-allow-others=false


###
#   Hibernate Settings
###
spring.jpa.hibernate.ddl-auto = none
spring.jpa.hibernate.use-new-id-generator-mappings=true

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

使DatePipe成为提供者

在您的应用模块中，您还可以将DatePipe添加到您的提供者数组中，如下所示：

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

现在你可以在你需要的构造函数中注入它（比如在cexbrayat＆＃39的答案中）。

要点：

无论哪种解决方案都有效，我都不知道哪一个角度会考虑最多？＆＃34;正确＆＃34;但是我选择手动实例化它，因为angular并没有提供日期管道作为提供商本身。

Answer 5

如果你不想做新的myPipe（）＆＃39;因为您要将依赖项注入管道，所以您可以像提供者一样注入组件并使用而不需要新的。

示例：

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

Answer 6

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

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

引入的

我可以用作：

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

虽然必须提供区域设置

Answer 7

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

HTTPResponse lResponse = new HTTPRequest().doGet("http://localService.com/, null, null);
FileOutputStream lFileOutputStream = new FileOutputStream("exampleFile.zip", false);
lFileOutputStream.write(lResponse.getMessage().getBytes());
lFileOutputStream.close();

您的自定义管道的

注释。然后，您可以将其用作服务

Answer 8

您可以使用formatDate（）格式化服务或组件ts中的日期。语法：-

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

您可以在此处查看所有其他预定义的格式选项，

https://angular.io/api/common/DatePipe

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

8 个答案:

这个答案现已过时

原始答案：

其他答案不适用于角度5？

在需要的地方实例化：

使DatePipe成为提供者

要点：