如何在 Angular 2 中的 DatePipe 中设置语言环境?
Posted
技术标签:
【中文标题】如何在 Angular 2 中的 DatePipe 中设置语言环境?【英文标题】:How to set locale in DatePipe in Angular 2? 【发布时间】:2016-04-26 13:44:51 【问题描述】:我想使用欧洲格式 dd/MM/yyyy
显示日期,但使用 DatePipe shortDate 格式它仅使用美国日期样式 MM/dd/yyyy
显示。
我假设默认语言环境是 en_US。也许我在文档中丢失了,但是如何更改 Angular2 应用程序中的默认语言环境设置?或者也许有一些方法可以将自定义格式传递给 DatePipe ?
【问题讨论】:
我也想知道这个。我发现日期管道文档解释了格式字符串中 y's m' 和 d's 的顺序被忽略,因为顺序是由语言环境设置的。但没有说明如何设置(甚至获取)语言环境。 【参考方案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
希望它对你有用。
【讨论】:
我很惊讶这似乎仍然没有记录在任何地方。不在日期管道页面 (angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html) 上,不在一般管道页面 (angular.io/docs/ts/latest/guide/pipes.html) 上,这个问题实际上是 Google 上的第一个问题 (google.com/search?q=angular%202%20locales&rct=j)。很棒的发现。 要在代码中使用管道,您现在必须将其格式化为new CurrencyPipe('en-US');
。希望这对某些事情有用,因为这在谷歌搜索我的问题时显示为第一个结果。
@corolla 你能解释一下这项服务吗?我想在应用程序运行时更改语言环境,该服务可以吗?我将如何实施这样的服务?
@MartijnvandenBergh,该服务只返回语言环境字符串 - 没什么特别的。我们在应用运行时尝试更改语言环境的结果好坏参半。结束重新加载页面以处理所有情况。 YMMV。
我在这个问题上也很挣扎,希望我写的关于这个的文章可以帮助一些人:medium.com/dailyjs/dynamic-locales-in-angular-dd9a527ebe1f【参考方案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>
或查看我的简单“Notes”项目here。
【讨论】:
我收到模板解析错误;无法按照建议的方式编译我使用的过滤器“localizedDate”。 您是否正确声明了LocalizedDatePipe?请参阅我的 example project 中的 pipe.module.ts。 是的,我之前已经解决了,@Milan Hlinak 我应该只在那个时候回答我的评论。但无论如何感谢您的及时回复。你做得很好。 这显然是我想要的。可惜需要一个自定义管道来在运行时更改语言环境.. 它有效,但请注意使用“不纯”管道比“纯”管道慢。正如Angular guide 所说:Angular 在每个组件更改检测周期中都会执行一个不纯的管道。不纯管道经常被调用,就像每次击键或鼠标移动一样频繁。考虑到这一点,请非常小心地使用不纯的管道。昂贵且长期运行的管道可能会破坏用户体验。【参考方案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...
]
)
Documentation
【讨论】:
确实,如果您需要使用除 en-US 以外的其他语言环境,您应该注册它。谢谢你的回答,@zgue 好的,这让我又头疼了。谢谢!文档有点复杂,因为我认为registerLocaleData
已经足够了,但它不是。
Ionic 4 的最佳答案!
这行得通,但现在百万美元的问题是为什么 Angular 强制语言环境为 en-US 而不是使用 Chrome 或操作系统语言环境?【参考方案4】:
如果你使用@ngx-translate/core
中的TranslateService
,下面是一个没有创建新管道的版本,它可以在运行时动态切换(在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) ...
【讨论】:
这出奇的好。你甚至不需要@ngx-translate。你能解释一下模板中的语句是做什么的吗? @lama, dueDate (你想格式化的任何日期) | date: 'shortDate' (对应于'format'的日期管道的第一个参数) : '' (第二个参数=> timeZone, "当不提供时,使用结束-用户的本地系统时区”。) : trasnlateService.currentLang (第三个参数 => 本地),这个DatePipe 如果您有自定义格式怎么办?那也会被本地化吗? 您究竟为什么认为这是一个缺点?我有兴趣并想知道;) 在我看来最好的解决方案,但在我的情况下,如果没有 @ngx-translate 和 TranslateService 也可以完美运行。【参考方案5】:在 app.module.ts 上添加以下导入。有一个 LOCALE 选项列表here。
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 中使用管道。这是角度documentation。
dateObject | date: 'medium'
【讨论】:
Justo necesitaba esto! 我在您的链接下找不到列表,但这是另一个不错的列表:iteration.info/Sharing/AllAngular5Locales.rtf(取自此处:***.com/questions/47285742/locales-in-angular-5) 这应该被接受的答案【参考方案6】:我查看了 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”。
如果我错了,请赐教。
【讨论】:
github.com/angular/angular/blob/master/modules/@angular/common/… 您可能想在下面查看卡罗拉的答案。它是最新的,并提供了一个很好的解决方案。【参考方案7】:你做这样的事情:
dateObj | date:'shortDate'
或
dateObj | date:'ddmmy'
见: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
【讨论】:
很抱歉,如果我的问题不清楚,但这正是我正在做的,但使用模式“shortDate”,它仅以美国风格显示。时间风格很好。 第二个例子显示了一种格式被传递给 DatePipe,这就是你想要的不? 试过了,还是不行。仅显示数字“5”,与日期无关。【参考方案8】:对于那些对 AOT 有问题的人,您需要使用 useFactory 做一些不同的事情:
export function getCulture()
return 'fr-CA';
@NgModule(
providers: [
provide: LOCALE_ID, useFactory: getCulture ,
//otherProviders...
]
)
【讨论】:
从 angular5 开始,您可以在 providers 数组中使用粗箭头表达式 provide: LOCALE_ID, useFactory: () => 'fr-CA'
帮了我大忙 ;)【参考方案9】:
从 Angular 9 开始,本地化过程发生了变化。查看official doc。
按照以下步骤操作:
-
如果还没有本地化包,请添加:
ng add @angular/localize
正如文档中所说:
Angular 存储库包含常见的语言环境。您可以通过在应用的工作区配置文件 (angular.json) 的 sourceLocale 字段中设置源语言环境来更改应用的源语言环境。构建过程(在本指南中将翻译合并到应用程序中进行了描述)使用应用程序的 angular.json 文件来自动设置 LOCALE_ID 令牌并加载语言环境数据。
像这样在angular.json
中设置语言环境(可以找到可用语言环境的列表here):
"$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"
基本上,您需要在i18n
部分定义sourceLocale
,并添加具有特定语言环境的构建配置,例如"localize": ["es"]
。您可以选择添加它,以便serve
部分
-
使用
build
或serve
构建具有特定语言环境的应用程序:ng serve --configuration=es
【讨论】:
与往常一样,您在 *** 中得到的解释比 Angular 官方文档更简洁明了。【参考方案10】:我在同样的问题上苦苦挣扎,使用它对我不起作用
dateObj | date:'ydM'
所以,我尝试了一种解决方法,虽然不是最好的解决方案,但它确实奏效了:
dateObj | date:'d'/dateObj | date:'M'/dateObj | date:'y'
我总是可以创建一个自定义管道。
【讨论】:
【参考方案11】:复制了谷歌管道更改了语言环境,它适用于我的国家,可能他们没有完成所有语言环境。下面是代码。
import
isDate,
isNumber,
isPresent,
Date,
DateWrapper,
CONST,
isBlank,
FunctionWrapper
from 'angular2/src/facade/lang';
import DateFormatter from 'angular2/src/facade/intl';
import PipeTransform, WrappedValue, Pipe, Injectable from 'angular2/core';
import StringMapWrapper, ListWrapper from 'angular2/src/facade/collection';
var defaultLocale: string = 'hr';
@CONST()
@Pipe( name: 'mydate', pure: true )
@Injectable()
export class DatetimeTempPipe implements PipeTransform
/** @internal */
static _ALIASES: [key: string]: String =
'medium': 'yMMMdjms',
'short': 'yMdjm',
'fullDate': 'yMMMMEEEEd',
'longDate': 'yMMMMd',
'mediumDate': 'yMMMd',
'shortDate': 'yMd',
'mediumTime': 'jms',
'shortTime': 'jm'
;
transform(value: any, args: any[]): string
if (isBlank(value)) return null;
if (!this.supports(value))
console.log("DOES NOT SUPPORT THIS DUEYE ERROR");
var pattern: string = isPresent(args) && args.length > 0 ? args[0] : 'mediumDate';
if (isNumber(value))
value = DateWrapper.fromMillis(value);
if (StringMapWrapper.contains(DatetimeTempPipe._ALIASES, pattern))
pattern = <string>StringMapWrapper.get(DatetimeTempPipe._ALIASES, pattern);
return DateFormatter.format(value, defaultLocale, pattern);
supports(obj: any): boolean return isDate(obj) || isNumber(obj);
【讨论】:
【参考方案12】:好的,我提出这个解决方案,很简单,使用ngx-translate
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): any
const date = new Date(value);
const options = weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
;
return date.toLocaleString(this.translateService.currentLang, options);
【讨论】:
【参考方案13】:以上答案肯定是正确的。请注意,也可以通过管道传递语言环境:
now | date: undefined:undefined:'de-DE'
(前两个参数是日期格式和时区,如果您对默认设置很好,请不要定义它们)
不是你想为所有管道做的事情,但有时它会很方便。
【讨论】:
【参考方案14】:这可能有点晚了,但就我而言(角度 6),我在 DatePipe 之上创建了一个简单的管道,如下所示:
private _regionSub: Subscription;
private _localeId: string;
constructor(private _datePipe: DatePipe, private _store: Store<any>)
this._localeId = 'en-AU';
this._regionSub = this._store.pipe(select(selectLocaleId))
.subscribe((localeId: string) =>
this._localeId = localeId || 'en-AU';
);
ngOnDestroy() // Unsubscribe
transform(value: string | number, format?: string): string
const dateFormat = format || getLocaleDateFormat(this._localeId, FormatWidth.Short);
return this._datePipe.transform(value, dateFormat, undefined, this._localeId);
可能不是最好的解决方案,但简单且有效。
【讨论】:
以上是关于如何在 Angular 2 中的 DatePipe 中设置语言环境?的主要内容,如果未能解决你的问题,请参考以下文章
Angular:在 node_module 组件中覆盖 DatePipe