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 - 如何更改angular4中md-input-container的下划线颜色?

html - Material 设计 Web 1.0 : How to center the (--full-bleed) button text within a card?

html - Angular Material FAB Speed Dial 在工具栏中有偏移

javascript - 具有独特选择的 Material 复选框

Angular 5 snackbar 通知

angular - 在 *ngIf 中使用两个变量

angular - 在服务返回值之前从 Angular 自定义管道获取返回值

ionic-framework - ionic2 + angular2 - 单击时禁用按钮

html - 如何阻止 <mat-expansion-panel> 用空格键触发?

angular - <mat-select> 不将 <mat-options> 附加到 cdk-overlay-container