Angular日期格式

首先

由于在Angular中处理日期的机会不断增加，所以我进行了总结。
我可能会有错误，请欢迎您指正。

在HTML模板中对日期进行格式化

当处理日期格式时，使用Angular的标准管道DatePipe是一种常见的方法。
语法为datetime | date:format。
format是可选的，但由于日期的位置固定，不受地区设置的影响，因此建议尽可能指定格式。

export class AppComponent {
  public now = new Date();
}

<div>現在時刻：{{now | date:"yy/MM/dd HH:mm"}}</div>

在组件.ts文件中的日期格式化

那个壹

在Angular的任何版本中，我们可以使用@angular/common模块中的DatePipe来进行日期的格式化。
以下是进行日期格式化的步骤：
1. 在app.module.ts的providers中添加DatePipe。
2. 在想要使用的组件中进行依赖注入。
3. 使用transform(date, format)函数来对日期进行格式化。

import { DatePipe } from '@angular/common';
@NgModule({
  providers: [ DatePipe ]  // 1
})

import { DatePipe } from '@angular/common';

export class AppComponent {
  constructor(
    public datePipe: DatePipe  // 2
  ) {
  }

  public alertNow() {
    let now = new Date();
    alert(this.datePipe.transform(now, "yy/MM/dd HH:mm"));  // 3
  }
}

这个2

在Angular6中，您可以直接使用DatePipe函数。
※不需要进行app.module.ts的设置。

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';

export class AppComponent {
  constructor(
    @Inject(LOCALE_ID) private locale: string
  ) {
  }

  public alertNow() {
    let now = new Date();
    alert(formatDate(now, "yy/MM/dd HH:mm", this.locale));
  }
}

文献引用

StackOverFlow：Angular – 在服务和组件中使用管道

Qiita：在Angular模型中使用管道