在Angular 2 App中处理组件中的日期转换

Question

我正在尝试改变某些日期在我的 Angular 2 应用程序中的显示方式。就我而言，在视图中使用日期管道和字符串插值不是一个选项，因为我的模板代码如下所示：

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

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

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

从“@angular/common”导入 { DatePipe }；然后将其添加到 组件或 ngModule 中的 providers 数组。

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

constructor(private myDatePipe: DatePipe) {} 并修改您的变量 属性：

this.staff.profile.hireDate = this.myDatePipe.transform(new Date(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');