2

我有一个使用自定义的多语言应用程序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. 谁能给我一个关于如何实现这一目标的小例子,假设它是可能的?

非常感谢!

4

1 回答 1

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 构建脚本中。

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

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

于 2018-12-19T18:09:38.377 回答