Angular (v4) DatePipe 与 UTC 日期时间作为本地时间答案

【问题标题】：Angular (v4) DatePipe with UTC datetime as local timeAngular (v4) DatePipe 与 UTC 日期时间作为本地时间
【发布时间】：2018-12-04 22:13:23
【问题描述】：

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

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

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

【问题讨论】：

标签： angular datetime iso8601

【解决方案1】：

Angular 4 的 DatePipe 支持 UTC zone designator 后缀（'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: Locale for a user

【讨论】：

完美无瑕！感谢您提供这个简单的解决方案！