如何设置在角度2的数据管现场？

我想显示日期使用欧洲格式 dd/MM/yyyy，但使用日期管 缩短日期格式它只显示使用美国日期样式 MM/dd/yyyy。
我假设默认的语言环境是 en _ US。也许我在文档中丢失了，但是我怎样才能改变 Angular2应用程序的默认区域设置呢？或者也许有某种方法可以将自定义格式传递给 DatePipe？

234184 次浏览
小开

你可以这样做:

\{\{ dateObj | date:'shortDate' }}

或者

\{\{ dateObj | date:'ddmmy' }}

参见: Https://angular.io/docs/ts/latest/api/common/index/datepipe-pipe.html

小开

我已经在 date _ tube. 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”。

如果我错了，请告诉我。

小开

我也在为同样的问题苦苦挣扎，所以我没有用这个

\{\{dateObj | date:'ydM'}}

因此，我尝试了一个变通方案，虽然不是最好的解决方案，但它确实奏效了:

\{\{dateObj | date:'d'}}/\{\{dateObj | date:'M'}}/\{\{dateObj | date:'y'}}

我总是可以创建一个自定义管道。

小开

复制谷歌管道改变了地区，它为我的国家工作，这是可能的，他们没有完成它的所有地区。下面是代码。

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); }
}
小开
最佳答案

从 Angular2 RC6开始，你可以通过添加一个提供者在你的应用模块中设置默认语言环境:

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

Currency/Date/Number 管道应该接收区域设置。 LOCALE _ ID 是一个 OpaqueToken，将从 angle/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);
}


}

现在，如果您使用 transateService 更改应用程序显示语言(请参见 翻译)

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>

或检查我的简单“笔记”项目 给你。

enter image description here

小开

对于那些有 AOT 问题的用户，您需要用 useFactory 来做一些不同的事情:

export function getCulture() {
return 'fr-CA';
}


@NgModule({
providers: [
{ provide: LOCALE_ID, useFactory: getCulture },
//otherProviders...
]
})
小开

好的，我提出这个解决方案，非常简单，使用 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);
}


}
小开

对于 angular5，上面的答案不再有效！

以下代码:

应用程序模块

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

导致以下错误:

错误: 缺少区域设置“ de-at”的区域设置数据。

使用 angular5，您必须自己加载和注册所使用的区域设置文件。

应用程序模块

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

文件

小开

这可能有点晚了，但在我的例子中(角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);
}

也许不是最好的解决方案，但简单而有效。

小开

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

如果你使用 @ngx-translate/core中的 TranslateService，下面是一个没有创建新管道的版本，它可以在运行时动态切换(在 Angular 7上测试)。使用 DatePipe 的 locale参数(医生) :

首先，声明您在应用程序中使用的语言环境，例如在 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');
}

然后，动态地使用您的管道:

我的组件

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

组件

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

从角9定位开始改变过程。检查 官方文件。

按照以下步骤:

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

Angular 存储库包括常见的语言环境。您可以通过在应用程序工作区配置文件(angular.json)的 source locale 字段中设置源语言环境来更改应用程序的源语言环境。构建过程(在本指南的应用程序合并翻译中描述)使用应用程序的 angular.json 文件自动设置 LOCALE _ ID 令牌并加载区域设置数据。

所以像这样在 angular.json中设置 locale (可用 locale 的列表可以找到 给你) :

{
"$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部分

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

以上答案当然是正确的。注意，还有可以通过管道传递区域设置:

  \{\{ now | date: undefined:undefined:'de-DE' }}

(前两个参数是日期格式和时区，如果你擅长使用默认值，就不要定义它们)

不是你想为你所有的管道做的事情，但有时它可以很方便。


提交答案