时间戳

首页 > 解决方案 > Angular (v4) DatePipe 与 UTC 日期时间作为本地时间

angular - Angular (v4) DatePipe 与 UTC 日期时间作为本地时间

问题描述

与较新版本的 Angular 不同，Angular 4 DatePipe似乎不支持将时区作为参数传递。

我有一个后端服务返回一个没有时区的 ISO 8601 格式的日期时间字符串（例如，2018-12-04T19:01:50.062）——存储并返回为 UTC。

使用DatePipe，如何将日期时间显示为用户的当地时间？

标签： angulardatetimeiso8601

解决方案

Angular 4DatePipe支持UTC 区域指示符后缀 ('Z')，因此如果您传递给管道的值是 UTC 日期时间，那么您的后端服务可以返回带有 'Z' 区域指示符的日期时间，或者您可以附加Z它会以用户的本地时间显示日期时间。

例如， 

<span class="date">{{ value + 'Z' | date:'short' }}</span>

注意：DatePipe如果您想使用用户的浏览器设置，您需要确保将 Angular 的 LOCALE_ID 动态提供给正确的语言环境（将导出的提供程序导入您的应用模块） ：

export class WindowRefService {
    public getWindow(): Window {
        return window;
    }
}

export function languageFactory(windowRef: WindowRefService): string {
  return windowRef.getWindow().navigator.language;
}

export const localeProvider = {
  provide: LOCALE_ID,
  deps: [WindowRefService],
  useFactory: languageFactory
};

请参阅其他问题LOCALE_ID：Angular4：用户的语言环境

推荐阅读