如何为Angular DatePipe的transform配置时区将UTC转指定时区时间

Angular 内置的 DatePipe 本身就支持自定义传入目标时区参数，完全不需要额外开发自定义管道，只要调用 transform 方法时补全对应的入参即可解决问题。

核心逻辑说明 #

DatePipe 的 transform 方法完整入参格式为：
transform(待转换的时间值, 展示格式, 目标时区, 区域语言)
你之前的写法只传了时间值和展示格式，没有指定时区，管道就会默认读取当前运行设备的系统时区做计算，才会出现输出和预期不符的情况。

具体改造步骤 #

1. 确认目标时区对应的IANA标准标识
   不能直接写“迪拜时区”这类自定义描述，必须使用国际标准时区库（IANA Time Zone Database）规定的命名值，阿联酋迪拜对应的合法时区标识为 Asia/Dubai，所有支持现代JS规范的运行环境都能识别这个值，且能自动适配当地的时区规则（比如是否存在夏令时调整）。
2. 调用方法时把时区值作为第三个参数传入即可
   改造后的代码示例：

   punch_time = this.datepipe.transform(
     '2021-02-05T06:03:40.574000Z',
     'shortTime',
     'Asia/Dubai'
   );
   

   针对你提供的UTC时间示例，由于迪拜常年为UTC+4时区、不执行夏令时，上述代码的固定输出结果为 10:03 AM，这个结果不会随用户设备的系统时区变化而改变。

实际开发中的注意事项 #

• 不少开发者会图省事直接传 +0400 这类固定UTC偏移值代替标准时区名，这里其实是个坑：如果目标地区存在夏令时调整，这种写法一到季节切换就会算错时间，比如换到纽约时区，冬夏的时间偏移差1小时，硬编码偏移的结果就会出现整小时的误差。用IANA标准时区名的话，管道会自己读取对应地区的最新时区规则计算，不用开发者手动跟进夏令时的变化。
• 模板场景下的管道调用写法和TS中手动调用完全一致，不需要额外处理：
  {{ 时间值 | date: 'shortTime' : 'Asia/Dubai' }}
• Angular的DatePipe底层是调用浏览器原生的Intl.DateTimeFormat API做时区计算，现代浏览器无需额外引入时区依赖即可正常计算所有IANA时区对应的时间，仅在需要兼容IE等老旧浏览器时，才需要补充对应时区的polyfill。

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