Làm cách nào để đặt ngôn ngữ trong DatePipe trong Angular 2?

Tôi muốn hiển thị Ngày bằng định dạng Châu Âu dd/MM/yyyynhưng sử dụng định dạng DatePipe shortDate, nó chỉ hiển thị theo kiểu ngày của Hoa Kỳ MM/dd/yyyy.
Tôi giả sử rằng miền địa phương mặc định là en_US. Có thể tôi bị thiếu trong các tài liệu nhưng làm cách nào tôi có thể thay đổi cài đặt ngôn ngữ mặc định trong ứng dụng Angular2? Hoặc có thể có một số cách để chuyển một định dạng tùy chỉnh cho DatePipe?

Kể từ Angular2 RC6, bạn có thể đặt ngôn ngữ mặc định trong mô-đun ứng dụng của mình bằng cách thêm nhà cung cấp:

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

Các ống Tiền tệ / Ngày / Số sẽ chọn miền địa phương. LOCALE_ID là một OpaqueToken , được nhập từ góc / lõi.

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

Đối với trường hợp sử dụng nâng cao hơn, bạn có thể muốn nhận ngôn ngữ từ một dịch vụ. Địa điểm sẽ được giải quyết (một lần) khi thành phần sử dụng đường ống ngày được tạo:

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

Hi vọng nó sẽ giúp ích cho bạn.

Giải pháp với LOCALE_ID là tuyệt vời nếu bạn muốn đặt ngôn ngữ cho ứng dụng của mình một lần. Nhưng nó không hoạt động, nếu bạn muốn thay đổi ngôn ngữ trong thời gian chạy. Đối với trường hợp này, bạn có thể thực hiện ống ngày tùy chỉnh.

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

}

Bây giờ nếu bạn thay đổi ngôn ngữ hiển thị ứng dụng bằng TranslateService (xem ngx-dịch )

this.translateService.use('en');

các định dạng trong ứng dụng của bạn sẽ tự động được cập nhật.

Ví dụ sử dụng:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

hoặc kiểm tra dự án "Ghi chú" đơn giản của tôi ở đây .

Với angular5câu trả lời trên không còn hoạt động!

Các mã sau đây:

app.module.ts

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

Dẫn đến lỗi sau:

Lỗi: Thiếu dữ liệu miền địa phương cho ngôn ngữ "de-at".

Với angular5bạn phải tải và đăng ký tập tin bản địa được sử dụng trên của riêng bạn.

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

Tài liệu

Nếu bạn sử dụng TranslateServicetừ @ngx-translate/core, bên dưới là phiên bản mà không tạo đường ống mới hoạt động với chuyển đổi linh hoạt khi chạy (được thử nghiệm trên Angular 7). Sử dụng localetham số ( tài liệu ) của DatePipe :

Đầu tiên, khai báo các địa điểm bạn sử dụng trong ứng dụng của mình, ví dụ 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');
}

Sau đó, sử dụng đường ống của bạn một cách linh hoạt:

myComponent.component.html

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

myComponent.component.ts

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

Tôi đã xem qua date_pipe.ts và nó có hai bit thông tin đáng quan tâm. gần đầu là hai dòng sau:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

Gần phía dưới là dòng này:

return DateFormatter.format(value, defaultLocale, pattern);

Điều này gợi ý cho tôi rằng đường ống ngày hiện tại được mã hóa cứng là 'en-US'.

Hãy soi sáng cho tôi nếu tôi sai.

Trên app.module.ts thêm các mục nhập sau. Có một danh sách các tùy chọn LOCALE ở đây .

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

Sau đó thêm nhà cung cấp

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

Sử dụng đường ống trong html. Đây là tài liệu góc cho việc này.

{{ dateObject | date: 'medium' }}

Bạn làm một cái gì đó như thế này:

{{ dateObj | date:'shortDate' }}

hoặc là

{{ dateObj | date:'ddmmy' }}

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

Tôi đã đấu tranh với cùng một vấn đề và đã không làm việc cho tôi bằng cách sử dụng này

{{dateObj | date:'ydM'}}

Vì vậy, tôi đã thử một cách giải quyết, không phải là giải pháp tốt nhất nhưng nó đã hoạt động:

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

Tôi luôn có thể tạo một đường ống tùy chỉnh.

Đối với những người gặp vấn đề với AOT, bạn cần thực hiện một chút khác biệt với useFactory:

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

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

Sao chép đường ống google đã thay đổi ngôn ngữ và nó hoạt động cho đất nước của tôi, có thể thấy rằng họ đã không hoàn thành nó cho tất cả các địa phương. Dưới đây là mã.

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

Ok, tôi đề xuất giải pháp này, rất đơn giản, sử dụng 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);
  }

}

Điều này có thể hơi muộn một chút, nhưng trong trường hợp của tôi (góc 6), tôi đã tạo ra một đường ống đơn giản trên đỉnh DatePipe, đại loại như thế này:

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

Có thể không phải là giải pháp tốt nhất, nhưng đơn giản và hiệu quả.