Angular 2의 DatePipe에서 로캘을 설정하는 방법은 무엇입니까?

유럽 ​​형식을 사용하여 날짜를 표시하고 싶지만 dd/MM/yyyyDatePipe 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...
  ]
})

Currency / Date / Number 파이프는 로캘을 선택해야합니다. LOCALE_ID는 각도 / 코어에서 가져올 OpaqueToken 입니다.

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>

또는 간단한 "메모"프로젝트를 여기에서 확인 하십시오 .

로 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) { ... }

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'로 하드 코딩되어 있음을 나타냅니다.

내가 틀렸다면 나를 깨우쳐주세요.

app.module.ts에서 다음 가져 오기를 추가하십시오. LOCALE 옵션 목록이 여기에 있습니다 .

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

당신은 이런 식으로합니다 :

{{ dateObj | date:'shortDate' }}

또는

{{ dateObj | date:'ddmmy' }}

참조 : https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

나는 같은 문제로 어려움을 겪고 있었고 이것을 사용하여 나를 위해 일하지 않았다

{{dateObj | date:'ydM'}}

그래서 최선의 해결책은 아니지만 해결 방법을 시도했지만 효과가있었습니다.

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

항상 사용자 정의 파이프를 만들 수 있습니다.

AOT에 문제가있는 사용자는 useFactory를 사용하여 조금 다르게해야합니다.

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

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

Google 파이프를 복사하여 로케일을 변경했으며 내 국가에서 작동하므로 모든 로케일에서 완료하지 못했습니다. 아래는 코드입니다.

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

최상의 솔루션은 아니지만 간단하고 작동합니다.