p-calendar 的国际化 (primeNg + i18next)

Question

我正在使用名为 i18next 的国际化框架。我的一个组件是 p-calendar，但我不知道如何使用此框架将其国际化。有谁知道我如何使用 i18next 国际化这个组件？如果有人知道不使用 i18next 的另一种解决方案，我也可以使用。

• 角度版本：8.2
• PrimeNG 版本：8.1.1

Answer 1

PrimeNG 版本更新 >= 11

将 i18N API 用于 PrimeNG 的较新版本。

创建一个翻译文件，例如“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"
}

并将文件包含在您的 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));
    }
}

查看官方文档。

旧（PrimeNG 版本 < 11）

对于 PrimeNG 日历，您可以在 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'
    };
}

查看官方文档。