Angular 4：日期管道，UTC 时间到本地时间：如何告诉 Angular 当前时区？答案

【问题标题】：Angular 4: Date pipe, UTC Time to local time: How to tell Angular the current time zone?Angular 4：日期管道，UTC 时间到本地时间：如何告诉 Angular 当前时区？
【发布时间】：2018-03-11 11:02:32
【问题描述】：

我们将 Angular 4 与一个用 .net 核心编写的 MVC 应用程序一起使用。使用 SignalR 服务接收数据，集线器是用 C# 编写的。数据库提供了一个 Datetime2(7) 字段 (T-SQL)，接收到的内容如下所示（对于日期字段）：

dueDt:"2017-10-02T08:54:00"

这个时间是 UTC 时间。我们生活在 +2 时区。现在，在 CSHTML 文件中，我们像这样显示这个值：

 <small>Due: {{item.dueDt | date:'dd.MM.yy HH:mm'}}</small>

显示如下内容： 27.09.17 12:43 这很好，问题只是我们的时区不是+0而是+2，所以它应该显示14:43作为时间。

我在某处读到 Angulars DatePipe 使用客户端本地时区，但这似乎不会发生在这里。（我已经用 chrome、firefox 和 Edge 试过了——没有区别）。有人知道为什么会发生这种情况，或者我如何告诉 Angular 本地时区是什么？我试过包括角力矩，但它也没有真正起作用。（如果这看起来很重要，我可以详细说明，但这是一个不同的问题。

【问题讨论】：

标签： angular model-view-controller .net-core

【解决方案1】：

将 Json Deserializer 选项设置为 UTC 就可以了。

Json 反序列化器的默认 DateTime Kind 是 RoundTripKind。当服务器端 datetime 对象的 Kind 设置为 Unspecified 时，RoundTripKind 不会在反序列化字符串的末尾添加 Z。我想这是正确的行为，但如果我们假设所有日期对象实际上都是 UTC 时间，那么我们可以告诉 Json Deserializer 来考虑它。

现在日期管道实际上知道时间是 UTC 并以本地时间显示，默认情况下很明显

services.AddMvc().AddJsonOptions(options =>
            {
                options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
            });

像"2019-03-15T21:00:00" 这样的字符串会变成"2019-03-15T21:00:00Z"

见：Newtonsoft Json.Net DateTimeZoneHandling setting

【讨论】：

这真的很聪明，如果你使用的是asp.net，我认为（正确的）方法。

【解决方案2】：

我使用moment.js 做了类似的事情，但它实际上特定于每个用户配置的区域设置和日期模式：

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
import { Observable } from 'rxjs/Rx';
import { UserService } from '../security/user/user.service';

@Pipe({
    name: 'formatDate'
})
@Injectable()
export class DateTimePipe implements PipeTransform {

    constructor(private userService: UserService) {

    }

    /**
     * Asynchronous pipe, transforms a date into a formatted date.
     * The transformation is based on the 'locale' and 'pattern' properties from the current user preferences.
     * Usage: this pipe need to be followed by the'async' pipe, since it returns an Observable.
     */
    transform(value: any, showTime?: boolean): Observable<string> {
        if (value) {
            return this.userService.getPreferences()
                .map(prefs => {
                    const locale = prefs.preferences.get('locale');

                    let pattern;
                    if (showTime) {
                        pattern = prefs.preferences.get('dateTimeFormat') || 'DD/MM/YYYY HH:mm';
                    } else {
                        pattern = prefs.preferences.get('dateFormat') || 'DD/MM/YYYY';
                    }

                    moment.locale(locale);

                    let date = value instanceof Date ? value : new Date(value);
                    return moment(date).format(pattern);
                });
        }
        return Observable.of(value);
    }
}

你也可以改变本地的时刻

moment.locale('en_GB')

在此处查看完整选项https://momentjs.com/

【讨论】：