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#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 build 脚本中。

参考：https://medium.com/frontend-fun/angular-introduction-to-internationalization-i18n-28226a85e04e

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