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

javascript angular date-pipe

2022-08-30 01:56:35

我想使用欧洲格式显示日期，但使用DatePipe shortDate格式，它只使用美国日期样式显示。
我假设默认区域设置是en_US。也许我在文档中丢失了，但是如何更改Angular2应用程序中的默认区域设置？或者也许有没有办法将自定义格式传递给DatePipe？dd/MM/yyyyMM/dd/yyyy

答案 1

从 Angular2 RC6 开始，您可以通过添加提供程序在应用模块中设置默认区域设置：

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

货币/日期/数字管道应选取区域设置。LOCALE_ID是不透明标记，将从角度/核心导入。

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

对于更高级的用例，您可能希望从服务中获取区域设置。创建使用日期管道的元件时，将解析（一次）区域设置：

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

希望它对您有用。

答案 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);
  }

}

现在，如果您使用翻译服务更改应用程序显示语言（请参阅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>

或者在这里检查我简单的“笔记”项目。