Angular 中的日期本地化答案

【问题标题】：Date localization in AngularAngular 中的日期本地化
【发布时间】：2020-05-15 09:53:15
【问题描述】：

在我的 Angular 8 应用程序中，我无法以本地化形式显示日期字段。我想提出类似以下的建议：

英文：“February 18, 2020 12:15:50”
法语：“18 février 2020, 12:15:50”

我想我应该使用 Angular 的 DatePipe:

{{ 我的日期 |日期}}

对于所有其他本地化目的，我使用的是ngx-translate（不是Angular i18n）。它使我可以访问当前语言（用户可以即时切换语言），但我不知道如何将TranslateService#currentLang 与DatePipe 中使用的语言联系起来。有没有办法以简单的方式做到这一点？

【问题讨论】：

标签： angular date internationalization ngx-translate date-pipe

【解决方案1】：

angular 提供了很多语言环境，所以 use 可以注册正确的语言环境，将在日期管道中使用。

// app.module.ts

import { registerLocaleData } from '@angular/common';
import frenchLocale from '@angular/common/locales/fr';
import { LOCALE_ID, NgModule } from '@angular/core';

registerLocaleData(frenchLocale);

然后你可以在日期管道中指定语言环境

someDate | date: null: null: 'fr'

或覆盖的默认语言环境

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "fr" }
  ]
})

更新

Angular i18n 使用差异化构建，但 ngx-translate 会按需获取所需的语言环境。由于我们无法结合这些方法，我们可以创建自定义日期管道，以满足我们的要求。

我使用当前的 TranslateService 语言环境提供程序和自定义日期管道创建了 demo，该管道等效于原始 date.pipe

【讨论】：

感谢您的帮助。但是，我怎样才能避免在someDate | date: null: null: 'en' 中硬编码'en' 而是输入“当前语言”？

【解决方案2】：

是的，您可以使用DatePipe。如您所见，它默认使用LOCALE_ID 令牌。如果您使用 Angular CLI，则会自动提供 LOCALE_ID：

要使用的区域设置格式规则的区域设置代码。未提供时，使用 LOCALE_ID 的值，默认为 en-US

【讨论】：