如何在Angular 4+的app.component.ts中用DatePipe获取指定格式日期时间

嘿，我来帮你搞定这个问题！

你遇到的核心问题是Date.now()返回的是13位数字类型的时间戳，而你需要的是和HTML中DatePipe输出一致的格式化日期字符串（或者能让HTML管道正确解析的日期对象）。根据你“不改动HTML”的需求，这里给你两种可行的解决方案：

方案1：在组件中直接使用DatePipe生成格式化后的字符串 #

这种方式把HTML里的格式化逻辑移到组件类中，让today直接存储最终的格式化字符串，完美匹配你想要的输出格式：

1. 首先在组件中引入DatePipe，并在组件的providers数组中注册这个服务（Angular 4需要手动声明）：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DatePipe] // 注册DatePipe服务
})

2. 在构造函数中注入DatePipe，调用它的transform方法（参数和你HTML里的完全一致）：

export class AppComponent {
  today: string; // 用字符串类型存储格式化后的日期

  constructor(private datePipe: DatePipe) {
    // 传入当前日期、格式字符串、时区参数，生成目标格式的日期
    this.today = this.datePipe.transform(new Date(), 'dd-MM-yyyy hh:mm:ss a', '+0530');
  }

  // 如果需要实时更新时间，可在ngOnInit中添加定时器
  ngOnInit() {
    setInterval(() => {
      this.today = this.datePipe.transform(new Date(), 'dd-MM-yyyy hh:mm:ss a', '+0530');
    }, 1000);
  }
}

方案2：保持HTML的DatePipe不变，传入正确的日期对象 #

如果你完全不想修改HTML代码（保留{{today | date:'dd-MM-yyyy hh:mm:ss a':'+0530'}}），只需要把today赋值为Date对象而非时间戳即可：

export class AppComponent {
  today: Date;

  constructor() {
    this.today = new Date(); // 直接赋值Date对象，DatePipe会自动解析格式化
  }

  // 如需实时更新时间：
  ngOnInit() {
    setInterval(() => {
      this.today = new Date();
    }, 1000);
  }
}

补充说明：其实DatePipe也支持解析时间戳，但你在ts里看到的13位数字只是变量的原始值，HTML里的管道依然会正常格式化输出。如果只是想在ts代码中拿到格式化后的字符串，方案1是更直接的选择。

内容的提问来源于stack exchange，提问作者Nikson