NGB-DatePicker изменить язык подсказок

Question

У меня есть многоязычное приложение, которое использует пользовательский NgbDatePickerI18n:

@Injectable()
export class CustomDatepickerService extends NgbDatepickerI18n {

    constructor(private translateService: TranslateService) {
        super();
    }

    getWeekdayShortName(weekday: number): string {
        return I18N_VALUES[this.translateService.getLanguage()].weekdays[weekday - 1];
    }

    getMonthShortName(month: number): string {
        return I18N_VALUES[this.translateService.getLanguage()].months[month - 1];
    }

    getMonthFullName(month: number): string {
        return this.getMonthShortName(month);
    }

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

все работает отлично, однако, когда я наведу курсор на кнопку предыдущего / следующего месяца, и в выпадающих меню для выбора месяца / года я вижу небольшую подсказку на английском языке. Я хотел бы перевести это. Посмотрел реальный код: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-navigation.ts#L15 и документацию https://ng-bootstrap.github.io/#/components/datepicker/ Overview#i18n о интернационализации, мне не очень понятно, как этого добиться. Я вижу следующее:

Следующие / предыдущие метки кнопок можно перевести с помощью стандартного механизма Angular i18n. Например, метка предыдущего месяца извлекается под именем ngb.datepicker.previous-month.

Но, как я уже сказал, я не могу найти небольшой пример того, как интегрировать это в моем CustomDatepickerService, Может ли кто-нибудь дать мне небольшой пример того, как этого добиться, предполагая, что это возможно?

Большое спасибо!

Answer 1

Вы можете сослаться на i18n Документы по интернализации Angular https://angular.io/guide/i18n

Необходимо следовать пользовательским идентификаторам и создать файл.xlf с этими тегами ниже.

<trans-unit id="ngb.datepicker.previous-month" datatype="html">
  <source>Previous Month</source>
  <target state="new">Translated Text</target>
</trans-unit> 

Затем вам нужно подключить этот.xlf к сценарию сборки ng.

Ссылка: https://medium.com/frontend-fun/angular-introduction-to-internationalization-i18n-28226a85e04e

https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app