Angular -在服务和组件中使用管道
在AngularJS中，我可以在服务和控制器中使用过滤器(管道)，语法类似如下：
$filter('date')(myDate, 'yyyy-MM-dd');在Angular中可以在服务/组件中使用管道吗？
回答 4
Stack Overflow用户
发布于 2018-02-22 05:40:07
其他答案在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成为提供者
在你的应用程序模块中，你也可以像这样将DatePipe添加到你的提供者数组中：
import { DatePipe } from '@angular/common';
@NgModule({
providers: [
DatePipe
]
})现在你可以在需要的地方把它注入到你的构造函数中(就像cexbrayat的答案一样)。
摘要：
无论哪种解决方案都有效，我不知道哪一种angular会认为最“正确”，但我选择手动实例化它，因为angular本身并没有提供datepipe作为提供者。
Stack Overflow用户
发布于 2017-10-20 16:15:38
如果你不想做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);
}
}Stack Overflow用户
发布于 2018-10-19 23:08:57
如果要在组件中使用自定义管道，可以添加
@Injectable({
providedIn: 'root'
})添加到自定义管道的注释。然后，您可以将其用作服务
https://stackoverflow.com/questions/35144821
复制相似问题
腾讯云开发者
