如何在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';在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)本身的导入:

February 2020 - Update to Angular 9.x
This updated Example on StackBlitz is upgraded to Angular 9.x to accommodate the latest version of the framework. Package versions have changed. Major change is the way to import from Angular Material. You cannot import from Material root anymore. You need to specify the import from the module (material/paginator) itself:

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

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