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

【问题标题】：How To Change itemsPerPageLabel in mat-paginator in Angular 6+如何在 Angular 6+ 的 mat-paginator 中更改 itemsPerPageLabel
【发布时间】：2019-06-01 02:14:21
【问题描述】：

我将 Angular 6.0.3 与 Angular Material 7.1.0 一起使用，我将分页器放在一个单独的组件中（不是 app.component）。到目前为止我尝试过的：

创建了名为 myPagniator.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”

我在这里做错了什么？有人可以给我一点提示吗？

【问题讨论】：

标签： typescript pagination angular-material angular6

【解决方案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，这是我问题的答案！

【解决方案2】：

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

【讨论】：

请不要只发布代码作为答案，还要说明您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。
不起作用或至少是不够的。请更好地解释答案

【解决方案3】：

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

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

  }

声明分页器后，可以在ngOnInit()中修改这段文字

【讨论】：

我用的分页器是这样的。 import { PageEvent, MatPaginator } from '@angular/material/paginator'; @ViewChild('paginator') paginator: MatPaginator; 在 ngOnInit() 中我无法获取分页器（未定义）你知道哪里出错了吗？
你也可以添加html吗？我不知道你的问题的确切原因是什么，但是stackoverflow.com/questions/48785965/… issue 可以给你启发

【解决方案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;
}

【讨论】：

【解决方案5】：

实现结果的另一种方式。

应用和组件模块将 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'; 
  }

【讨论】：

【解决方案6】：

只需将 _intl 设置为新的 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>

【讨论】：