Angular (v4) 以 UTC 日期时间为本地时间的 DatePipe

Question

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

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

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

Answer 1

Angular 4 的 DatePipe supports the UTC zone designator 后缀 ('Z')，因此如果您传递给管道的值是 UTC 日期时间，那么您的后端服务可以 return 您的带 'Z' 时区指示符的日期时间，或者您可以附加 Z，它将以用户当地时间显示日期时间。

例如，

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

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

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

Angular (v4) 以 UTC 日期时间为本地时间的 DatePipe

Angular (v4) DatePipe with UTC datetime as local time

datetime

iso8601

angular