ng-bootstrap 的国际化

Question

在 angular 项目中我使用 ng-bootstrap DatePicker.

但我需要将其国际化（需要设置阿拉伯语）。请帮助我。

Answer 1

创建一个服务来处理本地化

import { Component, Injectable } from '@angular/core';
import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
  'fr': {
    weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
    months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'],
  },
  'de': {
    weekdays: ['Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.', 'So.'],
    months: ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
  },
};

@Injectable()
export class I18n {
  language = 'de';
}

@Injectable()
export class DatepicketLocalizationService extends NgbDatepickerI18n {

  constructor(private _i18n: I18n) {
    super();
  }

  getWeekdayShortName(weekday: number): string {
    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
  }
  getMonthShortName(month: number): string {
    return I18N_VALUES[this._i18n.language].months[month - 1];
  }
  getMonthFullName(month: number): string {
    return this.getMonthShortName(month);
  }

  getDayAriaLabel(date: NgbDateStruct): string {
    return `${date.day}-${date.month}-${date.year}`;
  }
}

将其注入应用模块

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { DatepicketLocalizationService, I18n } from './datepicker-localization.service';
import { DatePickerComponent } from './datepicker.component';

@NgModule({
  imports: [BrowserModule, FormsModule, NgbModule],
  declarations: [DatePickerComponent],
  exports: [DatePickerComponent],
  providers: [
    I18n,
    { provide: NgbDatepickerI18n, useClass: DatepicketLocalizationService }
  ],
  bootstrap: [DatePickerComponent]
})
export class NgbdDatepickerI18nModule { }

您可以在 here

中找到完整的代码

ng-bootstrap 的国际化

Internationalization of ng-bootstrap

ng-bootstrap

angular