Angular 2의 DatePipe에서 로케일을 설정하는 방법은 무엇입니까?
형식을 한 날짜를 .dd/MM/yyyy그러나 DatePipe shortDate 형식을 사용하면 미국 날짜 스타일만 표시됩니다.MM/dd/yyyy.
기본 로케일은 en_US라고 가정합니다.문서에 내가 누락되었을 수도 있지만 Angular2 앱에서 기본 로케일 설정을 변경하려면 어떻게 해야 합니까?아니면 DatePipe에 사용자 지정 형식을 전달할 수 있는 방법이 있을까요?
Angular2 RC6 이후에는 공급자를 추가하여 앱 모듈에서 기본 로케일을 설정할 수 있습니다.
@NgModule({
providers: [
{ provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
//otherProviders...
]
})
통화/날짜/번호 파이프가 로케일을 선택해야 합니다.LOCAL_ID는 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);
}
}
이제 번역 서비스를 사용하여 앱 표시 언어를 변경하면 (sengx-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.s.ts.
@NgModule({
providers: [
{ provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
//otherProviders...
]
})
다음 오류가 발생합니다.
오류: 로케일 "de-at"에 대한 로케일 데이터가 없습니다.
와 함께angular5사용한 로케일 파일을 직접 로드하고 등록해야 합니다.
app.s.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...
]
})
사용하는 경우TranslateService@ngx-translate/core아래는 런타임에 동적으로 전환(Angular 7에서 테스트됨)하는 새 파이프를 만들지 않은 버전입니다.DatePipe 사용 »locale매개변수(변수):
를 들어, " 앱에사예로선을다언니합일케먼저는하용서예(다:니,▁the▁first합언선es▁you▁declare▁local을먼일▁e▁use저: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에서 다음 가져오기를 추가합니다.LOCAL 옵션 목록이 여기에 있습니다.
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' }}
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'로 하드 코딩되어 있음을 시사합니다.
제가 틀렸다면 가르쳐 주세요.
저는 같은 문제로 어려움을 겪었고 이것을 사용하지 않았습니다.
{{dateObj | date:'ydM'}}
그래서 최선의 해결책은 아니지만 해결책을 시도해 보았지만 효과가 있었습니다.
{{dateObj | date:'d'}}/{{dateObj | date:'M'}}/{{dateObj | date:'y'}}
언제든지 사용자 지정 파이프를 만들 수 있습니다.
다음과 같은 작업을 수행합니다.
{{ dateObj | date:'shortDate' }}
또는
{{ dateObj | date:'ddmmy' }}
참조: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
AOT에 문제가 있는 사람들은 useFactory:
export function getCulture() {
return 'fr-CA';
}
@NgModule({
providers: [
{ provide: LOCALE_ID, useFactory: getCulture },
//otherProviders...
]
})
Angular 9에서 시작하는 현지화 프로세스가 변경되었습니다.공식 문서를 확인하십시오.
다음 단계를 수행합니다.
- 현지화 추가:
ng add @angular/localize - 문서에 나와 있는 것처럼:
Angular 저장소에는 공통 로케일이 포함되어 있습니다.앱의 작업 공간 구성 파일(angular.json)의 sourceLocale 필드에서 소스 로케일을 설정하여 빌드에 대한 앱의 소스 로케일을 변경할 수 있습니다.빌드 프로세스(이 안내서의 앱으로 병합 번역에서 설명)는 앱의 angular.json 파일을 사용하여 LOCAL_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"
}
으로 기적으정합니다야해의로본을 정의해야 .sourceLocalei18n한 후 " " " 와 같은 특정 하여 빌드 합니다."localize": ["es"]선택적으로 추가할 수 있습니다.serve
- 사용특앱구축을 사용하여 앱
build또는serve:ng serve --configuration=es
위의 답변은 확실히 맞습니다.파이프를 사용하여 로케일을 전달할 수도 있습니다.
{{ now | date: undefined:undefined:'de-DE' }}
(첫 번째 매개변수 2개는 날짜 형식 및 시간대이며, 기본값을 사용하는 경우에는 정의되지 않은 상태로 둡니다.)
모든 파이프를 위해 하고 싶은 것은 아니지만, 가끔은 유용할 수 있습니다.
파이프 사용 및 기타 설치 없음.
현지화된 DatePipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { Locale } from 'src/app/contentful/interfaces/locale';
@Pipe({
name: 'localizedDate',
})
export class LocalizedDatePipe implements PipeTransform {
transform(value: any, locale: any): any {
const date = new Date(value);
const options: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
year: 'numeric',
};
return date.toLocaleDateString(locale, options);
}
}
Search-overlay.component.html
<span *ngIf="card.date" class="hero-cards-carousel__date">
{{ card.date | localizedDate: vm.locale?.code }}
</span>
결과
2012년 12월 20일
구글 파이프를 복사하여 로케일을 변경했고 우리나라에 작동합니다. 모든 로케일에 대해 완료하지 않았을 가능성이 있습니다.아래는 코드입니다.
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); }
}
저는 이을 아주 좋요아이, 는해제안다니합을책결저를 사용해서 합니다. 매우 간단합니다.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);
}
}
조금 늦었을 수도 있지만, 제 경우(각형 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);
}
최선의 해결책은 아니지만 간단하고 효과적입니다.
언급URL : https://stackoverflow.com/questions/34904683/how-to-set-locale-in-datepipe-in-angular-2
'programing' 카테고리의 다른 글
| 먼저 EF 코드를 사용하여 복합 키 매핑 (0) | 2023.06.03 |
|---|---|
| Android Studio 오류 "설치된 빌드 도구 버전 31.0.0이 손상되었습니다." (0) | 2023.06.03 |
| 마우스가 jQuery의 요소 위에 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.05.29 |
| postgresql에서 db에 대한 사용자를 생성하는 방법은 무엇입니까? (0) | 2023.05.29 |
| Xcode 운동장이 '달리는 운동장' 또는 '시뮬레이터 실행'에 걸려 코드가 실행되지 않습니다. 어떻게 해야 합니까? (0) | 2023.05.29 |