如何在入参为0时正确使用Angular的DatePipe日期管道？

问题原因 #

Angular的DatePipe默认采用运行环境的本地时区处理传入的时间戳，你设置的初始值0对应的是UTC标准时间的1970-01-01 00:00:00，如果你的设备时区为UTC+7（东七区），时间会自动偏移7小时，所以会显示为07:00:00。

解决方案 #

• 方案1：强制DatePipe使用UTC时区
  直接在管道的参数中指定时区为UTC即可，修改HTML代码：

<h4 class="text-primary">
  Result: {{ dateInTime | date: 'HH : mm : ss' : 'UTC' }}
</h4>

• 方案2：手动计算时分秒（无时区干扰）
  如果你只是需要展示累计计时的时分秒，不需要日期相关能力，可以自己实现转换逻辑，完全规避时区问题：
  TypeScript代码：

const ONE_SECOND = 1000;
dateInTime = 0;

get formattedTime() {
  const totalSeconds = Math.floor(this.dateInTime / 1000);
  const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
  const seconds = (totalSeconds % 60).toString().padStart(2, '0');
  return `${hours} : ${minutes} : ${seconds}`;
}

setInterval(() => {
  this.dateInTime += ONE_SECOND;
}, ONE_SECOND);

HTML代码：

<h4 class="text-primary">
  Result: {{ formattedTime }}
</h4>

内容的提问来源于stack exchange，提问作者Titus Sutio Fanpula