Angular 如何使用MatPaginatorIntl？

我正在使用组件，并试图找出如何翻译这些标签（文档对此不够清楚）

我已经找到了演示如何执行此操作的方法，并遵循了以下步骤：

1-我创建了一个名为

custom paginator.ts

的文件，并将以下内容放在那里：

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

export class CustomPaginator extends MatPaginatorIntl {
  constructor() {
    super();
    this.nextPageLabel = ' My new label for next page';
    this.previousPageLabel = ' My new label for previous page';
    this.itemsPerPageLabel = 'Task per screen';
  }
}

2-在

app.module.ts

I中输入：

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: CustomPaginator
    }
  ]
})
export class AppModule

然而，这并不能改变任何事情。我错过了什么？

你可以这样做： 我为您提供克罗地亚标签：

customClass.ts

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';

@Injectable()
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = 'Stavki po stranici';
  nextPageLabel     = 'Slijedeća stranica';
  previousPageLabel = 'Prethodna stranica';

  getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
      return '0 od ' + 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 startIndex + 1 + ' - ' + endIndex + ' od ' + length;
  };

}

---

文件中：matPaginatorIntlCroClass.ts

import {MatPaginatorIntl} from '@angular/material';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = 'Items par page';
  nextPageLabel     = 'Page Prochaine';
  previousPageLabel = 'Page Précedente';
}

在文件中：AppModule.ts：

providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],

import { MatPaginatorModule, MatPaginatorIntl} from '@angular/material';
import { MatPaginatorIntlCro } from './matPaginatorIntlCroClass'

@NgModule({
  imports: [],
  providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
  ..
})

---

来源：

基于Vinko Vorih代码，我制作了一个使用ngx translate的分页器，代码如下：

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

export class PaginatorIntlService extends MatPaginatorIntl {
  translate: TranslateService;
  itemsPerPageLabel = 'Items per page';
  nextPageLabel     = 'Next page';
  previousPageLabel = 'Previous page';
  getRangeLabel = function (page, pageSize, length) {
    const of = this.translate ? this.translate.instant('paginator.of') : 'of';
    if (length === 0 || pageSize === 0) {
      return '0 ' + of + ' ' + 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 startIndex + 1 + ' - ' + endIndex + ' ' + of + ' ' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    this.itemsPerPageLabel = this.translate.instant('paginator.items_per_page');
    this.nextPageLabel = this.translate.instant('paginator.next_page');
    this.previousPageLabel = this.translate.instant('paginator.previous_page');
  }

}

---

这样，您可以将翻译存储在常用的i18n文件中，如果您的web应用程序能够动态更改区域设置，则paginator将根据需要进行翻译。

我做了一些修改，以在开始索引超过列表长度时修复结束索引。我还添加了第一页和最后一页的翻译。用于@angular/material 5.2.4分页组件

从'@angular/core'导入{Injectable}；
从“@angular/material”导入{MatPaginatorIntl}；
从'@ngx translate/core'导入{TranslateService}；
@可注射（）
导出类MatPaginationIntlService扩展MatPaginatorIntl{
翻译：翻译服务；
firstPageLabel='第一页'；
itemsPerPageLabel='每页项目'；
lastPageLabel='最后一页'；
下一页标签='下一页'；
previousPageLabel='上一页'；
getRangeLabel=（页面：编号，页面大小：编号，长度：编号）：字符串=>{
const of=this.translate？this.translate.instant（'mat-paginator-intl.of'）：'of'；
如果（长度===0 | |页面大小===0）{
返回长度为+''+的'0'+；
}
长度=数学最大值（长度，0）；
常量startIndex=（（页面*页面大小）>长度）？
（数学单元（长度/页面大小）-1）*页面大小：
页面*页面大小；
const endIndex=Math.min（startIndex+pageSize，length）；
返回startIndex+1+'-'+endIndex+''+of+''长度；
};
injectTranslateService（翻译：TranslateService）{
this.translate=翻译；
this.translate.onLangChange.subscribe（（）=>{
这个。translateLabels（）；
});
这个。translateLabels（）；
}
translateLabels（）{
this.firstPageLabel=this.translate.instant（'mat-paginator-intl.first_page'）；
this.itemsPerPageLabel=this.translate.instant（'mat-paginator-intl.items每页'）；
this.lastPageLabel=this.translate.instant（'mat-paginator-intl.last_page'）；
this.nextPageLabel=this.translate.instant（'mat-paginator-intl.next_page'）；
this.previousPageLabel=this.translate.instant（'mat-paginator-intl.previousPageLabel'）；
}
}

要刷新标签，可以在标签更改后触发更改事件：

translateLabels() {
    this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
    ...
    this.changes.next();
}

---

此外，您还可以通过将Intl本身标记为可注入服务来使用注入服务。参见示例（忽略DoneSubject和LocalizeService的细节，因为它们是自定义实现）：

从'@angular/core'导入{Injectable，OnDestroy}；
从“@angular/material”导入{MatPaginatorIntl}；
从'app/general'导入{LocalizeService}；
从'app/rx'导入{DoneSubject}；
从“rxjs/operators”导入{takeUntil}；
@可注射（）
导出类MatPaginatorIntlLoc扩展MatPaginatorIntl实现OnDestroy{
构造函数（专用只读定位器：LocalizeService）{
超级（）；
locale$.pipe（takeUntil（this.done$）.subscribe（（）=>{
this.itemsPerPageLabel=localizer.translate（'mat paginator label:items per page'）；
this.nextPageLabel=localizer.translate（'mat paginator label:next page'）；
this.previousPageLabel=localizer.translate（'mat paginator label:previous page'）；
this.firstPageLabel=localizer.translate（'mat paginator label:first page'）；
this.lastPageLabel=localizer.translate（'mat paginator label:last page'）；
});
}
private readonly done$=new DoneSubject（）；
ngOnDestroy（）{this.done$.done（）；}
getRangeLabel=（页面：编号，页面大小：编号，长度：编号）=>this.localizer
.translate（'mat分页器标签：x/y'[
长度>0&&pageSize>0？（页面*pageSize+1）+'-'+数学最小值（（页面+1）*页面大小，数学最大值（长度，0））：0，
数学最大值（长度，0），
]);
}

别忘了在您的模块中提供：

提供者：[
...
{提供：MatPaginatorIntl，使用类：MatPaginatorIntlLoc}，
...
]

在应用程序中的任意位置注入MatPaginatorIntl，设置所需的翻译并调用更改。next（）。在每次语言更改时重复此操作（例如，在使用ngx translate时订阅onLangChange）。

我遇到了相同的问题，然后我在imports语句TranslateModule中的app.module.ts中更改为TranslateModule.forRoot（）

看起来是这样的：

imports: [
    ...
    TranslateModule.forRoot()
    ...
]

NPM网站的报价： forRoot静态方法是一种同时提供和配置服务的约定。请确保只在应用程序的根模块中调用此方法，大部分时间称为AppModule。此方法允许您通过指定加载程序、解析器和/或缺少的翻译处理程序来配置TranslateModule

全文如下：

---

阅读本文有助于解决TranslateModule的许多问题

如果你想让一个带有ngx translate的动态语言开关为你服务，这里有一个解决方案，它对我很有效

mat-paginator-i18n.service.ts

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

const ITEMS_PER_PAGE = 'Items per page:';
const NEXT_PAGE = 'Next page';
const PREV_PAGE = 'Previous page';
const FIRST_PAGE = 'First page';
const LAST_PAGE = 'Last page';

@Injectable()
export class MatPaginatorI18nService extends MatPaginatorIntl {
public constructor(private translate: TranslateService) {
  super();

  this.translate.onLangChange.subscribe((e: Event) => {
    this.getAndInitTranslations();
  });

  this.getAndInitTranslations();
}

public getRangeLabel = (page: number, pageSize: number, length: number): string => {
  if (length === 0 || pageSize === 0) {
    return `0 / ${length}`;
  }

  length = Math.max(length, 0);

  const startIndex: number = page * pageSize;
  const endIndex: number = startIndex < length
    ? Math.min(startIndex + pageSize, length)
    : startIndex + pageSize;

  return `${startIndex + 1} - ${endIndex} / ${length}`;
};

public getAndInitTranslations(): void {
  this.translate.get([
    ITEMS_PER_PAGE,
    NEXT_PAGE,
    PREV_PAGE,
    FIRST_PAGE,
    LAST_PAGE,
  ])
    .subscribe((translation: any) => {
      this.itemsPerPageLabel = translation[ITEMS_PER_PAGE];
      this.nextPageLabel = translation[NEXT_PAGE];
      this.previousPageLabel = translation[PREV_PAGE];
      this.firstPageLabel = translation[FIRST_PAGE];
      this.lastPageLabel = translation[LAST_PAGE];

      this.changes.next();
    });
}
}

en.json等

{
  "Items per page:": "Items per page:",
  "Next page": "Next page",
  "Previous page": "Previous page",
  "First page": "First page",
  "Last page": "Last page",
}

---

您应该从构造函数中删除标签的初始化，它应该可以工作。我正在尝试使用它，除了初始加载之外，它都可以按预期工作。当网站呈现时，还没有加载任何语言，我需要触发一个重新渲染器，以便开始翻译。你有解决办法吗？它有效。我用过

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: MatPaginatorI18nService,
    },
  ],
})
export class AppModule {
// ...

{
  "Items per page:": "Items per page:",
  "Next page": "Next page",
  "Previous page": "Previous page",
  "First page": "First page",
  "Last page": "Last page",
}