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内部化角度文档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更改工具提示语言

1 个答案: