在AngularJS中,我能够在服务和控制器中使用过滤器(管道),使用类似于下面的语法:
$filter('date')(myDate, 'yyyy-MM-dd');
在Angular中,可以在服务/组件中像这样使用管道吗?
在AngularJS中,我能够在服务和控制器中使用过滤器(管道),使用类似于下面的语法:
$filter('date')(myDate, 'yyyy-MM-dd');
在Angular中,可以在服务/组件中像这样使用管道吗?
当前回答
我使用这个方法:
import { Component, OnInit } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './my-app.component.html',
styleUrls: ['./my-app.component.scss']
})
export class MyComponent() implements OnInit {
constructor(private datePipe: DatePipe) {}
ngOnInit(): void {
let date = this.transformDate('2023-02-01T06:40:49.562Z');
console.log('date:',date);
}
transformDate(date: string) {
return this.datePipe.transform(date, 'yyyy-MM-dd');
}
}
其他回答
从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
是的,通过使用简单的自定义管道就可以实现。使用自定义管道的优点是,如果将来需要更新日期格式,我们可以去更新单个文件。
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);
}
如果想在组件中使用自定义管道,可以添加
@Injectable({
providedIn: 'root'
})
注释到自定义管道。 然后,您可以将其作为一项服务使用
我使用这个方法:
import { Component, OnInit } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './my-app.component.html',
styleUrls: ['./my-app.component.scss']
})
export class MyComponent() implements OnInit {
constructor(private datePipe: DatePipe) {}
ngOnInit(): void {
let date = this.transformDate('2023-02-01T06:40:49.562Z');
console.log('date:',date);
}
transformDate(date: string) {
return this.datePipe.transform(date, 'yyyy-MM-dd');
}
}
其他答案在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作为提供者。