角度中的日期本地化

Question

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

• 英语 ： "二月 18， 2020 12：15：50">
• 法语 ： "18 février 2020， 12：15：50">

我想我应该使用 Angular 的DatePipe：

{

{ myDate | date }}

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

Answer 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 按需获取所需的语言环境。由于我们无法组合这些方法，因此我们可以创建自定义日期管道，以满足我们的要求。

我使用当前的翻译服务区域设置提供程序和自定义日期管道创建了演示，该管道的反应性等同于原始日期.pipe

Answer 2

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

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