如何在Angular 2中的DatePipe中设置区域设置？

Question

我想显示使用欧洲格式的日期dd/MM/yyyy,但使用DatePipe shortDate格式只使用美国日期格式显示MM/dd/yyyy.
我假设默认语言环境是en_US.也许我在文档中遗漏了但是如何更改Angular2应用程序中的默认语言环境设置？或者是否有某种方法可以将自定义格式传递给DatePipe？

Answer 1

从Angular2 RC6开始,您可以通过添加提供程序在应用程序模块中设置默认语言环境:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

货币/日期/数字管道应该选择区域设置.LOCALE_ID是一个OpaqueToken,从angular/core导入.

import { LOCALE_ID } from '@angular/core';

对于更高级的用例,您可能希望从服务中获取区域设置.创建使用日期管道的组件时,将解析(一次)区域设置:

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

希望对你有效.

Answer 2

如果您想为应用设置一次语言,那么使用LOCALE_ID的解决方案非常棒.但是如果你想在运行时更改语言,它就不起作用.在这种情况下,您可以实现自定义日期管道.

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
  }

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }

}

现在,如果您使用TranslateService更改应用程序显示语言(请参阅ngx-translate)

this.translateService.use('en');

应用中的格式应自动更新.

使用示例:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

或者在这里查看我的简单"笔记"项目.

Answer 3

有了angular5上面的回答不再起作用!

以下代码:

app.module.ts

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

导致以下错误:

错误:缺少区域设置"de-at"的区域设置数据.

随着angular5你必须加载并注册在自己所使用的语言环境文件.

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

文档

Answer 4

我看过date_pipe.ts,它有两位感兴趣的信息.靠近顶部的是以下两行:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

这条线靠近底部:

return DateFormatter.format(value, defaultLocale, pattern);

这告诉我,日期管道目前硬编码为'en-US'.

如果我错了,请赐教.

Answer 5

如果您使用TranslateServicefrom @ngx-translate/core，则下面是未创建新管道的版本，该管道可在运行时动态切换（在Angular 7上进行了测试）。使用DatePipe的locale参数（docs）：

首先，声明您在应用中使用的语言环境，例如app.component.ts：

import localeIt from '@angular/common/locales/it';
import localeEnGb from '@angular/common/locales/en-GB';
.
.
.
ngOnInit() {
    registerLocaleData(localeIt, 'it-IT');
    registerLocaleData(localeEnGb, 'en-GB');
}

然后，动态使用您的管道：

myComponent.component.html

<span>{{ dueDate | date: 'shortDate' : '' : translateService.currentLang }}</span>

myComponent.component.ts

 constructor(public translateService: TranslateService) { ... }

Answer 6

在app.module.ts上添加以下导入。有区域设置选项列表在这里。

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

然后添加提供者

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

使用html中的管道。这是有关角度的文档。

{{ dateObject | date: 'medium' }}

Answer 7

你做这样的事情：

{{ dateObj | date:'shortDate' }}

或者

{{ dateObj | date:'ddmmy' }}

请参阅：https : //angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Answer 8

从 Angular 9 开始，本地化过程发生了变化。查看官方文档。

请按照以下步骤操作：

1. 如果还没有本地化包，请添加：ng add @angular/localize
2. 正如文档中所说：

Angular 存储库包含常见区域设置。您可以通过在应用程序工作区配置文件 (angular.json) 的 sourceLocale 字段中设置源区域设置来更改应用程序的构建源区域设置。构建过程（在本指南中将翻译合并到应用程序中进行了描述）使用应用程序的 angular.json 文件自动设置 LOCALE_ID 令牌并加载区域设置数据。

因此，请像这样设置区域设置（可以在此处angular.json找到可用区域设置列表）：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "es"
      },
      ....
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          "configurations": {
            "production": {
             ...
            },
            "ru": {
              "localize": ["ru"]
            },
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "test-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "test-app:build:production"
            },
            "ru":{
              "browserTarget": "test-app:build:ru"
            },
            "es": {
              "browserTarget": "test-app:build:es"
            }
          }
        },
        ...
      }
    },
    ...
  "defaultProject": "test-app"
}

基本上，您需要sourceLocale在i18n部分中定义并添加具有特定语言环境的构建配置，例如"localize": ["es"]. 您可以选择将其添加到此serve部分

3. build使用或构建具有特定区域设置的应用程序serve：ng serve --configuration=es