จะตั้งค่าภาษาใน DatePipe ใน Angular 2 ได้อย่างไร?

ฉันต้องการแสดงวันที่โดยใช้รูปแบบยุโรป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...
  ]
})

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

เอกสารประกอบ

หากคุณใช้TranslateServiceจาก@ngx-translate/coreด้านล่างนี้เป็นเวอร์ชันที่ไม่มีการสร้างไพพ์ใหม่ซึ่งทำงานร่วมกับการสลับแบบไดนามิกบนรันไทม์ (ทดสอบบน Angular 7) การใช้localeพารามิเตอร์ของ DatePipe ( เอกสาร ):

ขั้นแรกประกาศสถานที่ที่คุณใช้ในแอปของคุณเช่นใน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 เพิ่มการนำเข้าต่อไปนี้ มีรายการของตัวเลือกสถานที่เกิดเหตุเป็นที่นี่

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

เริ่มตั้งแต่กระบวนการแปล Angular 9 เปลี่ยนไป ตรวจสอบเอกสารที่เป็นทางการ

ทำตามขั้นตอนด้านล่าง:

1. เพิ่มแพ็คเกจการแปลหากยังไม่มี: ng add @angular/localize
2. ตามที่กล่าวไว้ในเอกสาร:

ที่เก็บเชิงมุมมีโลแคลทั่วไป คุณสามารถเปลี่ยนภาษาต้นทางของแอปของคุณสำหรับบิลด์ได้โดยตั้งค่าภาษาต้นทางในช่อง sourceLocale ของไฟล์การกำหนดค่าพื้นที่ทำงานของแอปของคุณ (angular.json) ขั้นตอนการสร้าง (อธิบายไว้ในการผสานการแปลลงในแอปในคู่มือนี้) ใช้ไฟล์ angular.json ของแอปของคุณเพื่อตั้งค่าโทเค็น LOCALE_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"
}

โดยทั่วไปคุณต้องกำหนดsourceLocaleในi18nส่วนและเพิ่มการกำหนดค่าการสร้างด้วยโลแคลเฉพาะเช่น"localize": ["es"]. คุณสามารถเพิ่มserveส่วนนี้ได้หรือไม่

3. สร้างแอปด้วยภาษาเฉพาะโดยใช้buildหรือserve:ng serve --configuration=es

คัดลอก 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);
}

อาจไม่ใช่ทางออกที่ดีที่สุด แต่เรียบง่ายและใช้ได้ผล