在Angular 2应用程序中处理组件中的日期转换

Question

我正在尝试改变Angular 2应用程序中某些日期的显示方式。在我的例子中，在视图中使用日期管道和字符串插值不是一个选项，因为我的模板代码看起来像这样：

<input class="app-input"
[(ngModel)]="staff.profile.hireDate" placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>

一位评论者建议我在将日期传递给视图之前，先尝试处理组件中日期的转换。这是他写的：

您可以在组件中执行此操作。

从"@angular/common"导入｛DatePipe｝；然后将其添加到providers数组。

在你的组件中，你在构造函数中注入这个：

构造函数(private myDatePipe:DatePipe)｛｝并修改您的变量属性：

this.staff.prof.rehire日期=this.myDatePipe.transform(新日期(this.staff.profile.hireDate))；

这听起来是一个完美的解决方案。然而，我仍然不清楚具体的实施方式。我已经导入了DatePipe，并在构造函数中定义了一个本地实例。但下一部分要去哪里：

this.staff.profile.hireDate = this.myDatePipe.transform(new Date(this.staff.profile.hireDate));

我试着把它放在构造函数的主体中，但没有成功。

因此，我仍然有点不清楚这会发生什么，以及之后是否需要更改视图中的代码。

如有任何澄清，我们将不胜感激。

Answer 1

以这种方式使用DatePipe

NgModule({
providers: [DatePipe]
})

在您的组件内部：

import { DatePipe } from '@angular/common';
...
constructor(private datePipe: DatePipe) {}
...
this.staff.profile.hireDate= this.datePipe.transform(this.staff.profile.hireDate, 'dd-MM-yy');