如何在Angular 4中翻译mat-paginator？

Question

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

Answer 1

你可以使用MatPaginatorIntl这个.Showell会做一个不再有效的例子,所以这里有一个更新版本(荷兰语)和分步指导.

1. 将MatPaginatorIntlfrom @angular/material导入您的应用程序.
2. 为您的语言环境创建一个新的paginator文件(在本例中我使用Dutch)并导入:import { getDutchPaginatorIntl } from './app/dutch-paginator-intl';在main.ts文件中
3. provider为main.ts文件内部的Paginator 设置一个,所以它需要你本地文件的翻译(而不是英文作为默认语言):

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

4. 在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;

StackBlitz上以分页器转换文件为起点的示例.

更新到Angular 6.x StackBlitz上的
这个更新示例升级到Angular 6.x以适应框架的最新版本.只有包已更改,分页器内部没有任何更改.

Answer 2

修改后的解决方案(使用Angular 6)基于@ ngx-translate接受的答案:

@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}}"
}  

配置NGX-翻译在app.module.ts:

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.';
  ...
}

Answer 4

对于 Angular 9.0.0，如果您使用 i18n 包，您可以这样做

\n\n

要求：ng添加@Angular/Localization

\n\n

创建一个名为 my-paginator-intl.ts 的文件

\n\n

import { MatPaginatorIntl } from \'@angular/material/paginator\'\n\nconst matRangeLabelIntl = (page: number, pageSize: number, length: number) => {\n    if (length === 0 || pageSize === 0) {\n        return $localize`:@@paginator.zeroRange:0 in ${length}`\n    }\n    length = Math.max(length, 0)\n    const startIndex = page * pageSize\n\n    // If the start index exceeds the list length, do not try and fix the end index to the end.\n    const endIndex = startIndex < length ?  Math.min(startIndex + pageSize, length) : startIndex + pageSize\n    return $localize`:@@paginator.rangeOfLabel:${startIndex + 1} - ${endIndex} in ${length}`\n}\n\nexport function MyPaginatorIntl() {\n    const paginatorIntl = new MatPaginatorIntl()\n\n    paginatorIntl.itemsPerPageLabel = $localize`:@@paginator.displayPerPage:Items per page`\n    paginatorIntl.nextPageLabel = $localize`:@@paginator.nextPage:Next page`\n    paginatorIntl.previousPageLabel = $localize`:@@paginator.prevPage:Prev page`\n    paginatorIntl.getRangeLabel = matRangeLabelIntl\n\n    return paginatorIntl\n}\n

\n\n

导入到app.module.ts

\n\n

import { MatPaginatorIntl } from \'@angular/material/paginator\'\nimport { MyPaginatorIntl } from \'./shared/paginator-int/my-paginator-intl\'\n\n@NgModule({\n    providers: [\n        { provide: MatPaginatorIntl, useValue: MyPaginatorIntl() },\n    ]\n})\n

\n\n

将以下内容复制到您的语言 xlf 文件中

\n\n

<trans-unit id="paginator.zeroRange">\n  <source>0 of <x id="PH" /></source>\n  <target>0 trong <x id="PH" /></target>\n</trans-unit>\n<trans-unit id="paginator.rangeOfLabel">\n  <source><x id="PH" /> - <x id="PH_1" /> of <x id="PH_2" /></source>\n  <target><x id="PH" /> - <x id="PH_1" /> trong <x id="PH_2" /></target>\n</trans-unit>\n<trans-unit id="paginator.displayPerPage">\n  <source>Items per page</source>\n  <target>Hi\xe1\xbb\x83n th\xe1\xbb\x8b/Trang</target>\n</trans-unit>\n<trans-unit id="paginator.nextPage">\n  <source>Next page</source>\n  <target>Trang k\xe1\xba\xbf</target>\n</trans-unit>\n<trans-unit id="paginator.prevPage">\n  <source>Prev page</source>\n  <target>Trang tr\xc6\xb0\xe1\xbb\x9bc</target>\n</trans-unit>\n

\n