如何使用Angular DatePipe将时间输出中的GMT替换为UTC显示

结论 #

Angular 内置 DatePipe 的时区格式占位符（O/z/Z）默认使用GMT作为时区前缀，没有内置配置项可以直接切换为UTC前缀，可通过以下两种方案实现需求：

方案1：单场景快速替换 #

仅在少量页面使用时，直接对格式化后的结果做字符串替换即可，注意加可选链避免空值报错：

{{ (currentDate | date:'dd/MM/yyyy hh:mm:ss a (O)')?.replace('GMT', 'UTC') }}

方案2：自定义全局管道（多场景复用推荐） #

如果项目多处需要该格式，封装自定义管道统一处理逻辑，无需在每个模板单独写替换代码：

1. 执行Angular CLI命令生成管道：
   ng generate pipe pipes/custom-date
2. 编写管道逻辑：

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

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(
    value: Date | string | number, 
    format?: string, 
    timezone?: string, 
    locale?: string
  ): string | null {
    const formatted = this.datePipe.transform(value, format, timezone, locale);
    return formatted ? formatted.replace(/GMT/g, 'UTC') : null;
  }
}

3. 在对应模块的providers数组中添加DatePipe，同时确保CustomDatePipe已在模块的declarations数组中声明。
4. 模板中直接使用自定义管道：

{{ currentDate | customDate:'dd/MM/yyyy hh:mm:ss a (O)' }}

最终输出效果为你需要的 17/09/2021 10:50:32 AM (UTC-4)。

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