如何在服务和指令脚本文件中使用angular2内置日期管道[重复]

Posted 2023-03-13

【中文标题】如何在服务和指令脚本文件中使用angular2内置日期管道[重复]

【英文标题】：How to use angular2 built-in date pipe in services and directives script files [duplicate]

【发布时间】：2017-05-07 21:39:28

【问题描述】：

我需要在服务和指令脚本文件中使用 angular2 的日期管道（不仅在 html 中）。

有人有想法吗？

由于一些政策限制，无法上传代码，对此感到抱歉。

【问题讨论】：

@Community，我想问的是如何在服务和指令中使用 angular2 日期管道，而不仅仅是在与问题 ***.com/questions/36816548/… 现在不同的组件中，所以请帮助更正您的标签。跨度>

【参考方案1】：

由于 CommonModule 不会将其导出为提供程序，因此您必须自己完成。这不是很复杂。

1) 导入日期管道：

import  DatePipe  from '@angular/common';

2) 在模块的提供者中包含 DatePipe：

NgModule(
  providers: [DatePipe]
)
export class AppModule 

或组件的提供者：

@Component(
  selector: 'home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html',
  providers: [DatePipe]
)
export class HomeComponent 
...

3) 像任何其他服务一样将其注入到组件的构造函数中：

constructor(private datePipe: DatePipe) 

4) 使用它：

ngOnInit() 
    this.time = this.datePipe.transform(new Date());

【讨论】：

非常感谢@Alexander，它对我有用，但我需要像这样导入 DatePipeimport DatePipe from '@angular/common/src/pipes'; 否则 webstorm 会显示错误。

@LarryChen，这只是意味着您的设置有其他问题，我的确实理解。可能你正在使用旧版本的 ng2 或 WebStorm。

我的版本："@angular/common": "^2.3.0"，网络风暴：2016.3.2

【参考方案2】：

在你的组件中

import  DatePipe  from '@angular/common';

如果您使用的是 Angular 2、4 版本，请尝试

new DatePipe().transform(myDate, 'yyyy-dd-MM');

如果您使用的是 Angular 6 及更高版本

new DatePipe('en-US').transform(myDate, 'yyyy-dd-MM');

希望这会有所帮助。

【讨论】：

谢谢Avnesh，我发现DatePipe的构造函数是constructor(_locale: string)，你的建议错过了一个参数，但无论如何它给了我很多启发。

结合两个答案的示例代码new DatePipe('en-US').transform(myDate, 'yyyy-dd-MM');

请编辑以添加@Chimu 显示的语言环境

@Avnesh Shakya Lcan 你能告诉我如何在上面的函数中添加“America/Los_Angeles”时间吗？

@KapilSoni 看看这个是否有帮助：***.com/questions/67731783/…