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

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

Currency/Date/Number 管道应该选择区域设置。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
}

希望对你有效。

如果您想为您的应用设置一次语言，使用 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>

或者在这里查看我简单的“Notes”项目。

有了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...
  ]
})

文档

如果你使用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) { ... }

在 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' }}