angular - 如何在 Angular 4 中翻译 mat-paginator?

标签 angular material-design angular-material

你有什么想法可以翻译 Angular 的 mat-paginator 标签中的“Items per page”吗? mat-paginator 是 Material Design 中的一个元素。

最佳答案

您可以为此使用 MatPaginatorIntlWill Howell made一个不再有效的示例,因此这里是更新版本(荷兰语)和分步指南。

  1. @angular/material 中的 MatPaginatorIntl 导入您的应用程序。
  2. 为您的语言环境创建一个新的分页器文件(在本例中我使用荷兰语)并导入:import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; in main.ts 文件
  3. main.ts 文件中为 Paginator 设置一个 provider,因此它会翻译您的本地文件(而不是英语作为默认语言):
providers: [
   { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
]
  1. 在您的 paginator-intl 文件中,为可以翻译的字符串设置标签并将其导出。该文件最重要的部分(有关更多信息,请参见示例):
paginatorIntl.itemsPerPageLabel = 'Items per pagina:';
paginatorIntl.firstPageLabel = 'Eerste pagina';
paginatorIntl.previousPageLabel = 'Vorige pagina';
paginatorIntl.nextPageLabel = 'Volgende pagina';
paginatorIntl.lastPageLabel = 'Laatste pagina';
paginatorIntl.getRangeLabel = dutchRangeLabel;

Example on StackBlitz以分页器翻译文件为起点。


2018 年 6 月 - 更新到 Angular 6.x
此更新 Example on StackBlitz已升级到 Angular 6.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2019 年 6 月 - 更新到 Angular 8.x
此更新 Example on StackBlitz已升级到 Angular 8.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2020 年 2 月 - 更新到 Angular 9.x
此更新Example on StackBlitz已升级到 Angular 9.x 以适应最新版本的框架。软件包版本已更改。主要变化是从 Angular Material 导入的方式。您不能再从 Material root 导入。您需要指定从模块 (material/paginator) 本身导入:

import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';

2020 年 6 月 - 更新到 Angular 10.x
此更新 Example on StackBlitz已升级到 Angular 10.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2020 年 12 月 - 更新到 Angular 11.x
此更新Example on StackBlitz已升级到 Angular 11.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2021 年 5 月 - 更新到 Angular 12.x
此更新Example on StackBlitz已升级到 Angular 12.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2022 年 1 月 - 更新到 Angular 13.x
此更新 Example on StackBlitz已升级到 Angular 13.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2022 年 6 月 - 更新到 Angular 14.x
此更新 Example on StackBlitz已升级到 Angular 14.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。


2022 年 11 月 - 更新到 Angular 15.x
此更新 Example on StackBlitz已升级到 Angular 15.x 以适应最新版本的框架。只有包发生了变化,分页器内部没有任何变化。

关于angular - 如何在 Angular 4 中翻译 mat-paginator?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47593692/

相关文章:

angular - 如何在 typescript 构造函数中将数组对象转换为字符串?

javascript - 可以在 foreach() 中使用服务

javascript - 如何重复 Firestore 查询直到满足条件?

javascript - Famo.us 在 vanilla js 中的功能? (表面/StateModifier/Transitionable/Transform)

html - md-next-button 不适用于 Angular Material

angular - 如何在订阅期间检查 Angular 5 RxJS Observable 的 NULL 结果?

Android Navigation Drawer - 用其他列表替换列表 onClick

android - 如何在 fragment 中设置 datePickerMode?

angular - 在 Angular Material 日期选择器中禁用特定日期

angular - 如何删除 Angular Material 中步进器标题的默认焦点?