如何将Angular模板中经DateTime Pipe格式化的时间获取到组件中

嘿，我来帮你搞定这个问题！你想在组件类里拿到用DateTimePipe格式化后的时间，其实不用依赖模板渲染，直接在组件里注入DateTimePipe然后调用它的transform方法就可以啦，步骤很简单：

步骤1：导入并注入DateTimePipe #

首先在你的app.component.ts里导入DateTimePipe，然后通过构造函数注入它。另外要注意，需要把DateTimePipe添加到组件的providers数组（或者模块的providers数组）里，这样Angular才能正确实例化它。

步骤2：调用transform方法获取格式化后的时间 #

在组件的初始化钩子（比如ngOnInit）里，调用dateTimePipe.transform()方法，传入原始时间和你需要的格式字符串（和模板里用的格式保持一致就行），把结果赋值给组件变量。

完整代码示例 #

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DateTimePipe } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // 将DateTimePipe添加到组件的providers中
  providers: [DateTimePipe]
})
export class AppComponent implements OnInit {
  // 原始时间变量
  originalDate: Date = new Date();
  // 存储格式化后的时间
  formattedDate!: string;

  // 注入DateTimePipe
  constructor(private dateTimePipe: DateTimePipe) {}

  ngOnInit(): void {
    // 定义你需要的时间格式，和模板里的格式一致
    const timeFormat = 'yyyy-MM-dd HH:mm:ss';
    // 调用transform方法格式化时间，处理可能的null返回值
    this.formattedDate = this.dateTimePipe.transform(this.originalDate, timeFormat) || '';
    
    // 现在你就可以在组件里任意使用这个格式化后的时间了
    console.log('组件内获取的格式化时间:', this.formattedDate);
  }
}

app.component.html（可选，用来验证）

<p>原始时间：{{ originalDate }}</p>
<p>模板管道格式化：{{ originalDate | date:'yyyy-MM-dd HH:mm:ss' }}</p>
<p>组件变量格式化：{{ formattedDate }}</p>

额外说明 #

• 如果你需要动态切换格式，可以把格式字符串抽成一个组件变量，这样模板和组件里用同一个变量，避免格式不一致。
• transform方法在某些情况下可能返回null（比如传入的时间无效），所以最好用|| ''来兜底，避免出现null值展示的问题。

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