angular - Internationell anpassning av p-calendar (primeNg + i18next)

Jag använder internationella ramverket som kallas i18next. En av mina komponenter är en p-calendar men jag vet inte hur jag ska internationalisera den med detta ramverk. Vet någon hur jag kan internationalisera denna komponent med i18next? Om någon vet en annan lösning utan att använda i18next, kan jag också använda det.

  • Angular version: 8.2
  • PrimeNG version: 8.1.1

Svar #1

UPPDATERING för PrimeNG-version >= 11

Använd i18N API:et för nyare versioner av PrimeNG.

Skapa en översättningsfil som "en.json".

{
"primeng": {
    "dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    "dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    "dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
    "monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"],
    "monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "today": "Today",
    "weekHeader": "Wk"
}

Och inkludera filen i din app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {

    constructor(private config: PrimeNGConfig, private translateService: TranslateService) {}

    ngOnInit() {
        this.translateService.setDefaultLang('en');
    }

    translate(lang: string) {
        this.translateService.use(lang);
        this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
    }
}

Kolla in den officiella dokumentationen.

GAMMAL (PrimeNG-version < 11)

För PrimeNG-kalendern kan du lägga till lokalisering via egenskapen locale.

HTML:

<p-calendar [(ngModel)]="dateValue" [locale]="en"></p-calendar>

TS

ngOnInit() {
    this.en = {
        firstDayOfWeek: 0,
        dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
        monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
        monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
        today: 'Today',
        clear: 'Clear',
        dateFormat: 'mm/dd/yy',
        weekHeader: 'Wk'
    };
}

Kolla in den officiella dokumentationen.

Relaterade artiklar