如何在 Angular 4 中翻译 mat-paginator? [英] How to translate mat-paginator in Angular 4?

问题描述

您对如何翻译 Angular 的 mat-paginator 标签中的每页项目数"有什么想法吗?mat-paginator 是 Material Design 中的一个元素.

Do you have any ideas how can I translate "Items per page" in Angular's mat-paginator tag? The mat-paginator is an element from Material Design.

推荐答案

您可以为此使用 MatPaginatorIntl.Showell 会制作一个不再有效的例子，所以这里有一个更新版本(含荷兰语)和分步指南.

You can use the MatPaginatorIntl for this. Will Showell made an example that no longer works, so here is an updated version (with Dutch) and step-by-step guidance.

1. 将 MatPaginatorIntl 从 @angular/material 导入您的应用程序.
2. 为您的语言环境创建一个新的分页器文件(在本例中我使用荷兰语)并导入:import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; in main.ts 文件
3. 在 main.ts 文件中为分页器设置一个 provider，这样它就会翻译您的本地文件(而不是英语作为默认语言):

1. Import the MatPaginatorIntl from @angular/material into your application.
2. Create a new paginator file for your locale (in this example I use Dutch) and import that: import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; in main.ts file
3. Set a provider for the Paginator inside of the main.ts file, so it takes the translations of your local file (instead of English as default language):

providers: [
   { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
]

1. 在您的 paginator-intl 文件中，为可翻译的字符串设置标签并导出这些标签.该文件最重要的部分(有关详细信息，请参见示例):

1. Inside your paginator-intl file, set the labels for the strings that can be translated and export these. Most important part of that file (see the example for more info):

paginatorIntl.itemsPerPageLabel = 'Items per pagina:';
paginatorIntl.firstPageLabel = 'Eerste pagina';
paginatorIntl.previousPageLabel = 'Vorige pagina';
paginatorIntl.nextPageLabel = 'Volgende pagina';
paginatorIntl.lastPageLabel = 'Laatste pagina';
paginatorIntl.getRangeLabel = dutchRangeLabel;

StackBlitz 示例 以分页器翻译文件为起点.

Example on StackBlitz with the paginator translations file as starting point.

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

June 2018 - Update to Angular 6.x
This updated Example on StackBlitz is upgraded to Angular 6.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

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

June 2019 - Update to Angular 8.x
This updated Example on StackBlitz is upgraded to Angular 8.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

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

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

<小时>

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

---

June 2020 - Update to Angular 10.x
This updated Example on StackBlitz is upgraded to Angular 10.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

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

December 2020 - Update to Angular 11.x
This updated Example on StackBlitz is upgraded to Angular 11.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

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

May 2021 - Update to Angular 12.x
This updated Example on StackBlitz is upgraded to Angular 12.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

这篇关于如何在 Angular 4 中翻译 mat-paginator?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！