如何在Angular的非component.ts文件中使用datepipe格式化日期

Angular的DatePipe虽然常作为服务在组件内注入使用，但本身也支持脱离注入体系直接调用，以下是三种适配不同场景的实现方案：

方案1：直接实例化DatePipe（最适配静态常量文件场景） #

不需要依赖Angular注入器，直接在TS文件内导入并创建DatePipe实例即可使用。
首先导入依赖并完成实例化：

import { DatePipe } from '@angular/common';
// 若需要使用非英文区域的日期规则，额外添加以下配置（以中文为例）
import { registerLocaleData } from '@angular/common';
import zhCN from '@angular/common/locales/zh';
registerLocaleData(zhCN);

// 实例化时传入对应区域ID：英文传'en-US'、中文传'zh-CN'
const datePipe = new DatePipe('zh-CN');

修改你的常量代码即可，注意setFullYear返回的是数值型时间戳，需要先转为Date对象再格式化：

export const dateObject = [
  {
    value: {
      start: datePipe.transform(new Date(), 'yyyy-MM-dd'),
      end: datePipe.transform(new Date(new Date().setFullYear(new Date().getFullYear() + 10)), 'yyyy-MM-dd'),
    },
    title: 'Ten Years Later'
  }
];

方案2：同步项目全局Locale配置（适合需要统一全局规则的场景） #

如果希望DatePipe的配置和项目全局注入的Locale、时区等规则保持一致，可以通过Angular的应用初始化钩子生成常量：

1. 修改你的常量文件，导出初始化方法：

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

// 声明可修改的常量容器
export let dateObject: Array<{value: {start: string | null, end: string | null}, title: string}> = [];

// 导出初始化函数，供Angular启动时调用
export function initDateObject(datePipe: DatePipe) {
  dateObject = [
    {
      value: {
        start: datePipe.transform(new Date(), 'yyyy-MM-dd'),
        end: datePipe.transform(new Date(new Date().setFullYear(new Date().getFullYear() + 10)), 'yyyy-MM-dd'),
      },
      title: 'Ten Years Later'
    }
  ];
}

2. 在app.module.ts中注册初始化钩子：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { DatePipe } from '@angular/common';
import { initDateObject } from './你的常量文件路径';

@NgModule({
  // 其他模块配置省略
  providers: [
    DatePipe,
    {
      provide: APP_INITIALIZER,
      useFactory: (datePipe: DatePipe) => () => initDateObject(datePipe),
      deps: [DatePipe],
      multi: true
    }
  ]
})
export class AppModule { }

方案3：纯TS轻量实现（无Angular依赖） #

如果仅需要简单的yyyy-MM-dd格式，不需要多语言、时区等复杂处理，可以直接自定义格式化函数，完全不依赖Angular服务：

// 轻量日期格式化工具函数
const formatDate = (date: Date | number): string => {
  const target = new Date(date);
  const year = target.getFullYear();
  const month = String(target.getMonth() + 1).padStart(2, '0');
  const day = String(target.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 直接调用即可
export const dateObject = [
  {
    value: {
      start: formatDate(new Date()),
      end: formatDate(new Date().setFullYear(new Date().getFullYear() + 10)),
    },
    title: 'Ten Years Later'
  }
];

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