如何翻译角4中的分页器？

Question

你有什么想法，我如何翻译“每页项目”在角的mat-paginator标签？mat-paginator是材料设计中的一个元素。

Answer 1

您可以为此使用MatPaginatorIntl。威尔·豪厄尔是一个不再起作用的例子，因此这里有一个更新版本(带有荷兰语)和逐步指导。

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

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

1. 在您的分页器-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;

以分页器翻译文件为起点的StackBlitz上的实例。

2018年6月-更新为角6.x

更新后的StackBlitz上的实例被升级到角形6.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2019年6月-更新到角8.x

更新后的StackBlitz上的实例被升级到角形8.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2020年2月-更新为角9.x

更新后的StackBlitz上的实例被升级到角形9.x，以适应该框架的最新版本。包版本已经更改。主要的变化是从角质材料进口的方式。您不能再从物质根导入。您需要指定来自模块(material/paginator)本身的导入：

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

2020年6月-更新到角10.x

这个更新的StackBlitz上的实例被升级到角形10.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2020年12月-更新到角11.x

更新后的StackBlitz上的实例被升级到角11.x，以适应框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2021年5月-更新到角12.x

这个更新的StackBlitz上的实例被升级到角形12.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2022年1月-更新到角13.x

更新后的StackBlitz上的实例被升级到角13.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2022年6月-更新到角14.x

更新后的StackBlitz上的实例将升级到角14.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

2022年11月-更新到角15.x

更新后的StackBlitz上的实例被升级到角形15.x，以适应该框架的最新版本。只有包已更改，分页器内的任何内容都没有更改。

Answer 2

基于@ngx-翻译接受答案的修正解(角为6)

@NgModule({
  imports: [...],
  providers: [
    {
      provide: MatPaginatorIntl, deps: [TranslateService],
      useFactory: (translateService: TranslateService) => new PaginatorI18n(translateService).getPaginatorIntl()
    }
  ]
})
export class CoreModule {}

和PaginatorI18n

import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

export class PaginatorI18n {

    constructor(private readonly translate: TranslateService) {}

    getPaginatorIntl(): MatPaginatorIntl {
        const paginatorIntl = new MatPaginatorIntl();
        paginatorIntl.itemsPerPageLabel = this.translate.instant('ITEMS_PER_PAGE_LABEL');
        paginatorIntl.nextPageLabel = this.translate.instant('NEXT_PAGE_LABEL');
        paginatorIntl.previousPageLabel = this.translate.instant('PREVIOUS_PAGE_LABEL');
        paginatorIntl.firstPageLabel = this.translate.instant('FIRST_PAGE_LABEL');
        paginatorIntl.lastPageLabel = this.translate.instant('LAST_PAGE_LABEL');
        paginatorIntl.getRangeLabel = this.getRangeLabel.bind(this);
        return paginatorIntl;
    }

    private getRangeLabel(page: number, pageSize: number, length: number): string {
        if (length === 0 || pageSize === 0) {
            return this.translate.instant('RANGE_PAGE_LABEL_1', { length });
        }
        length = Math.max(length, 0);
        const startIndex = page * pageSize;
        // If the start index exceeds the list length, do not try and fix the end index to the end.
        const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
        return this.translate.instant('RANGE_PAGE_LABEL_2', { startIndex: startIndex + 1, endIndex, length });
    }
}

和cz.json

{
    "ITEMS_PER_PAGE_LABEL": "Počet řádků:",
    "NEXT_PAGE_LABEL": "Další stránka",
    "PREVIOUS_PAGE_LABEL": "Předchozí stránka",
    "FIRST_PAGE_LABEL": "První stránka",
    "LAST_PAGE_LABEL": "Poslední stránka",
    "RANGE_PAGE_LABEL_1": "0 z {{length}}",
    "RANGE_PAGE_LABEL_2": "{{startIndex}} - {{endIndex}} z {{length}}"
}  

在app.module.ts中配置ngx-转换

import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useFactory: httpLoaderFactory, deps: [HttpClient] }
    })
  ],
  providers: [{ provide: LOCALE_ID, useValue: 'cs' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

对于快速和肮脏的解决方案，请使用this.paginator._intl属性。

在我的...component.ts中有：

@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  ...
  this.paginator._intl.itemsPerPageLabel = 'My translation for items per page.';
  ...
}