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}`;
    }
}

一切正常，但是当我将鼠标悬停在 previous/next 月份按钮上时，下拉菜单 select 和 month/year 我可以看到一些英文工具提示。我想翻译一下。看了实际代码：https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-navigation.ts#L15 and the documentation https://ng-bootstrap.github.io/#/components/datepicker/overview#i18n关于国际化，我不是很清楚如何实现。我可以看到以下内容：

The next/previous button labels can be translated using the standard Angular i18n mechanism. For example, previous month label is extracted under the ngb.datepicker.previous-month name.

但是就像我说的，我找不到一个小例子来说明如何将它集成到我的 CustomDatepickerService 中。谁能给我一个小例子，说明如何实现这个假设是可能的？

非常感谢！

Answer 1

你可以参考国际化Angular文档https://angular.io/guide/i18n#internationalization-i18n

需要遵循自定义 ID 并使用以下标签创建 .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

ngb-datepicker 更改工具提示语言

ngb-datepicker change tooltips language

angular

internationalization

ng-bootstrap

angular-i18n

ngb-datepicker