如何在Angular 6+中更改mat-paginator中的itemsPerPageLabel？

Question

我正在使用 Angular 6.0.3 和 Angular Material 7.1.0，我的分页器在一个单独的组件中（不是 app.component）。到目前为止，我尝试了以下方法：

创建了一个名为 myPaginator.ts 的单独的 ts 文件：

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

export class MyPaginatorLabel extends MatPaginatorIntl {

  itemsPerPageLabel = 'custome_label_name'; // customize item per page label

  constructor() {
    super();
  }
}

在我的 app.module.ts 文件中：我从 Angular Material 中导入了 MatPaginatorModule 和 MatPaginatorIntl。在 app.module.ts 的 providers 数组中，我添加了 MyPaginatorLabel 和 MatPaginatorIntl。

在使用 Angular MatPaginator 的组件中，我扩展了 MyPaginatorLabel 类并调用了它的构造函数 super() 方法，但最终它仍然显示默认文本“itemsPerPage”。

我在这里做错了什么？能否给我一些提示？

- Edward Sun

Answer 1

创建一个新的TypeScript文件，并添加一个被导出并返回MatPaginatorIntl对象的函数。

要修改显示的标签和文本，请创建一个MatPaginatorIntl的新实例，并将其包含在自定义提供程序中-Angular Material-Paginator > API CustomPaginatorConfiguration.ts

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

export function CustomPaginator() {
  const customPaginatorIntl = new MatPaginatorIntl();

  customPaginatorIntl.itemsPerPageLabel = 'Custom_Label:';

  return customPaginatorIntl;
}

然后将其添加到 app.module.ts 文件中：

import { MatPaginatorIntl } from '@angular/material';
import { CustomPaginator } from './app/CustomPaginatorConfiguration';

@NgModule({
  // ...
  providers: [
    { provide: MatPaginatorIntl, useValue: CustomPaginator() }
  ]
})

您也可以为特定组件设置设置，例如：

import { CustomPaginator } from './CustomPaginator';
import { MatPaginatorIntl } from '@angular/material';
/**
 * @title Paginator
 */
@Component({
  selector: 'your_component',
  templateUrl: 'your_component.html',
  providers: [
    { provide: MatPaginatorIntl, useValue: CustomPaginator() }  // Here
  ]
})

StackBlitz

- Prashant Pimpale

---

谢谢Prashant Pimpale，这就是我问题的答案！ - Edward Sun

Answer 2

 @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel="Test String";

  }

在声明分页器后，可以在ngOnInit()中修改此文本。

- whitefang

---

我正在使用的分页器是这样的。import { PageEvent, MatPaginator } from '@angular/material/paginator';@ViewChild('paginator') paginator: MatPaginator;在 ngOnInit() 中，我无法获取分页器(undefined)，你知道哪里出了问题吗？ - Ben

你能添加HTML吗？我不知道你问题的确切原因，但是https://dev59.com/K1YM5IYBdhLWcg3wfQIZ可以给你启示。 - whitefang

@Ben，如果分页器在*ngIf内部，你应该使用setter方法获取它，而不仅仅是使用viewChild。（生命周期方法无法正常工作...） - Guntram

使用ngAfterViewInit代替ngOnInit以确保分页器被初始化。 - Morgan M.

Answer 3

另一种实现结果的方法。

应用程序和组件模块将MatPaginatorIntl定义为提供程序。

  providers:[
    MatPaginatorIntl
  ]

导入MatPaginatorIntl，在构造函数中声明，然后在ngOnInit内定义下一个文本。

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

  constructor(
    public _MatPaginatorIntl: MatPaginatorIntl
  ) { }

  ngOnInit() {
    this._MatPaginatorIntl.itemsPerPageLabel = 'your custom text 1';
    this._MatPaginatorIntl.firstPageLabel = 'your custom text 2';
    this._MatPaginatorIntl.itemsPerPageLabel = 'your custom text 3';
    this._MatPaginatorIntl.lastPageLabel = 'your custom text 4';
    this._MatPaginatorIntl.nextPageLabel = 'your custom text 5';
    this._MatPaginatorIntl.previousPageLabel = 'your custom text 6'; 
  }

- Roberto Vieira

---

天啊！这是最好的解决方案！谢谢你，伙计！ - Dzmitry Alifer

Answer 4

基于Prashant Pimpale的示例，"of"的完整示例翻译如下：

export function CustomPaginator(): MatPaginatorIntl {
  const customPaginatorIntl = new MatPaginatorIntl();

  customPaginatorIntl.itemsPerPageLabel = 'Items par page :';
  customPaginatorIntl.nextPageLabel = 'Page suivante';
  customPaginatorIntl.firstPageLabel = 'Première page';
  customPaginatorIntl.lastPageLabel = 'Dernière page';
  customPaginatorIntl.previousPageLabel = 'Page précédente';
  customPaginatorIntl.getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) {
      return `0 à ${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} sur ${length}`;
  };

  return customPaginatorIntl;
}

- Charles Bourree

Answer 5

基于ngx-translate和Observable的完整解决方案，因此支持在应用程序中切换语言。

创建MatPaginatorIntl的子类，在其中注入TranslateService。在构造函数中翻译分页器标签，并侦听语言更改以触发相同的操作。rangeLabel使用startIndex、endIndex和length变量的插值进行翻译。

import {MatPaginatorIntl} from "@angular/material/paginator";
import {TranslateParser, TranslateService} from "@ngx-translate/core";
import {Injectable, OnDestroy} from "@angular/core";
import {Subject} from "rxjs";
import {takeUntil} from 'rxjs/operators';

/* Sources:
https://medium.com/front-dev/translate-your-matpaginator-with-ngx-translate-and-stay-reactive-4c7b145cae9
https://www.mariokandut.com/how-to-translate-matpaginator-angular/
*/
@Injectable()
export class TranslatedMatPaginator extends MatPaginatorIntl implements OnDestroy {

  private unsubscribe: Subject<void> = new Subject<void>();

  private translatedRangeLabel: string = '';

  constructor(private translateService: TranslateService, private translateParser: TranslateParser) {
    super();

    this.translateService.onLangChange
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => {
        this.getAndInitTranslations();
      });

    this.getAndInitTranslations();
  }

  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }

  getAndInitTranslations() {
    this.translateService.stream([
      'paginator.first.page',
      'paginator.items.per.page',
      'paginator.last.page',
      'paginator.next.page',
      'paginator.previous.page',
      'paginator.range'
    ])
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(translation => {
        this.firstPageLabel = translation['paginator.first.page'];
        this.itemsPerPageLabel = translation['paginator.items.per.page'];
        this.lastPageLabel = translation['paginator.last.page'];
        this.nextPageLabel = translation['paginator.next.page'];
        this.previousPageLabel = translation['paginator.previous.page'];
        this.translatedRangeLabel = translation['paginator.range'];

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

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

    let translation = this.translateParser.interpolate(this.translatedRangeLabel, {startIndex, endIndex, length});
    if (translation) {
      return translation;
    }

    return this.translatedRangeLabel;
  };
}

在您的模块代码中添加一个提供者，该提供者基本上在需要MatPaginatorIntl实例时返回您自定义翻译子类的实例。 可以在app.module.ts或material.module.ts中实现。

import {TranslatedMatPaginator} from "./translated-mat-paginator";
...
providers: [
    {provide: MatPaginatorIntl, useClass: TranslatedMatPaginator},
  ]

- Ivo Eersels

Answer 6

只需将_intl设置为new MatPaginatorIntl并设置属性。同时将mat-paginator id设置为'paginator'。

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

@ViewChild('paginator') set paginator(pager:MatPaginator) {
    if (pager) {
      this.dataSource.paginator = pager;
      this.dataSource.paginator._intl = new MatPaginatorIntl()
      this.dataSource.paginator._intl.itemsPerPageLabel = "bla bla bla";
    }
  }


<mat-paginator #paginator [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>

- bedkan

Answer 7

this.dataSource.paginator._intl.itemsPerPageLabel ='Nombre de Session par page';

- mendji

---

请不要仅仅以代码的形式回答问题，还需要解释你的代码实现了什么功能以及如何解决该问题。带有解释的答案通常具有更高的质量，并且更有可能获得点赞。 - Suraj Kumar

不起作用，或者至少不够。请更好地解释答案。 - Gavi

那甚至不是正确的翻译。“Nombre d'éléments par page” 更好。 - Jaraxxus