Answers:
像在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,但并非所有浏览器都支持它(请检查兼容性表)。
如果您使用的是较旧的Angular版本,则应将Intl
polyfill 添加到项目中以避免任何问题。请参阅此相关问题以获取更详细的答案。
建议使用其他答案中的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');
Date
构造函数时,以月为0
基础。所以0
是一月和1
是2月。更正了失误y
error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'.
在线var formatted = new DatePipe().transform(raw, ['yyyy-MM-dd']);
@NgModule({ providers:[DatePipe] })
然后在您的课程中导入和注入 constructor( private datePipe: DatePipe ){}
是的,可以使用简单的自定义管道。使用自定义管道的优点是,如果将来需要更新日期格式,则可以去更新单个文件。
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'
我收到错误消息,因为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添加到您的provider数组中,如下所示:
import { DatePipe } from '@angular/common';
@NgModule({
providers: [
DatePipe
]
})
现在,您可以将它注入所需的构造函数中(如cexbrayat的答案)。
无论哪种解决方案都有效,我不知道哪个角度会认为最“正确”,但我选择手动实例化它,因为angular本身并未提供日期管道。
new
使用管道时,您仍然必须DI语言环境。我觉得整个@Inject(LOCALE_ID) private locale: string
语法很麻烦。
如果要在组件中使用自定义管道,则可以添加
@Injectable({
providedIn: 'root'
})
您的自定义管道的注释。然后,您可以将其用作服务
providedIn: 'root'
我们的管道内或者在使用管道局部模块中提供?
如果因为要注入要依赖的管道而不想执行“ 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 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');
尽管必须提供语言环境
您可以使用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');
您可以在此处查看所有其他预定义的格式选项,