Angular中数字时间戳转Date类型及TS端实现date管道效果的问题

你在TS代码中直接写myDate | date触发编译报错，核心原因是竖线管道语法仅在Angular模板编译阶段生效，TS原生语法环境完全不识别这套写法，会把竖线当作位或运算符解析，自然无法通过校验。

不需要依赖HTML模板，直接在TS中调用Angular内置的DatePipe服务，就能输出和模板中{{ mydate | date }}完全一致的格式化结果，操作步骤：

• 完成依赖注入配置
• 传统NgModule架构的项目：在功能模块或根模块的providers数组中注册DatePipe
• Angular 14+独立组件架构的项目：直接在组件的imports数组中引入DatePipe，框架会自动完成依赖提供，无需额外手动注册
• 在业务组件的构造函数中注入DatePipe实例，不需要手动实例化对象

constructor(private datePipe: DatePipe) {}

• 调用实例的transform方法执行格式化
  这个方法原生支持接收Date.now()返回的毫秒时间戳、Date对象、ISO格式日期字符串作为入参，只要传入和模板管道一致的格式参数，输出就和模板效果1:1对齐：

// mydate = Date.now() 得到的数字类型时间戳
const formattedDate = this.datePipe.transform(this.mydate);
// 如果模板里使用了自定义格式，比如{{ mydate | date:'yyyy-MM-dd' }}，这里同步传入第二个参数即可完全对齐
// const formattedDate = this.datePipe.transform(this.mydate, 'yyyy-MM-dd');

• 你定义的Inventaire接口中，DATE_INV、CREATED、MODIFIED字段都标注为Date类型，如果最终传给后端的是格式化后的字符串，建议把这些字段的类型调整为string，否则TS编译会提示类型不匹配
• 不要用原生JS的toLocaleString、手动拼接字符串的方式做日期格式化，这类方法的输出受运行环境的本地化、时区配置影响，很难保证和Angular DatePipe的输出完全一致

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