Angular自定义DatePipe转换特定格式时间戳时遇错误求助

你的代码存在两个核心问题，导致运行报错：

1. DatePipe依赖注入错误 #

Angular中直接在自定义管道里注入DatePipe会触发依赖注入失败，因为DatePipe默认不属于可直接注入的服务范畴。更稳妥的方式是手动实例化DatePipe，而非依赖注入。

2. 日期格式解析失败 #

new Date(value.substring(2))传入的20240211132714格式无法被Date构造函数正确解析，会返回Invalid Date，进而导致后续格式化逻辑出错。

修正后的完整代码 #

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from "@angular/common";

// 若使用Angular独立组件/管道，添加standalone: true
@Pipe({ name: 'timestampFormatter', standalone: true })
export class TimestampFormatter implements PipeTransform {
  // 手动实例化DatePipe，指定locale（可按需调整为zh-CN等）
  private datePipe = new DatePipe('en-US');

  transform(value: string, format: string = 'MMM d, y, h:mm:ss a'): string {
    // 校验输入格式，不符合则返回空字符串
    if (!value || !value.startsWith('D:')) return '';
    
    // 提取时间部分并拆分为年、月、日、时、分、秒
    const timeStr = value.substring(2);
    const year = timeStr.slice(0, 4);
    const month = timeStr.slice(4, 6);
    const day = timeStr.slice(6, 8);
    const hour = timeStr.slice(8, 10);
    const minute = timeStr.slice(10, 12);
    const second = timeStr.slice(12, 14);
    
    // 构建ISO标准格式的日期字符串，确保Date能正确解析
    const isoDate = `${year}-${month}-${day}T${hour}:${minute}:${second}`;
    const date = new Date(isoDate);
    
    // 校验日期有效性，无效则返回空字符串
    if (isNaN(date.getTime())) return '';
    
    return this.datePipe.transform(date, format) || '';
  }
}

额外配置说明 #

• 若未使用独立管道，需在对应模块的declarations数组中声明TimestampFormatter：

  @NgModule({
    declarations: [TimestampFormatter],
    imports: [CommonModule]
  })
  export class YourModule { }
  

• 如需中文日期格式，可将new DatePipe('en-US')改为new DatePipe('zh-CN')，同时调整格式化字符串（比如'yyyy年MM月dd日 HH:mm:ss'）。

内容的提问来源于stack exchange，提问作者f-accu