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

Question

我将 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”

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

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
  ]
})

闪电战

Answer 2

另一种实现结果的方法。

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

Answer 3

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

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

  }

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

Answer 4

基于 Prashant Pimpale 示例翻译“of”的完整示例

\n

export function CustomPaginator(): MatPaginatorIntl {\n  const customPaginatorIntl = new MatPaginatorIntl();\n\n  customPaginatorIntl.itemsPerPageLabel = 'Items par page :';\n  customPaginatorIntl.nextPageLabel = 'Page suivante';\n  customPaginatorIntl.firstPageLabel = 'Premi\xc3\xa8re page';\n  customPaginatorIntl.lastPageLabel = 'Derni\xc3\xa8re page';\n  customPaginatorIntl.previousPageLabel = 'Page pr\xc3\xa9c\xc3\xa9dente';\n  customPaginatorIntl.getRangeLabel = (page: number, pageSize: number, length: number) => {\n    if (length === 0 || pageSize === 0) {\n      return `0 \xc3\xa0 ${length }`;\n    }\n    length = Math.max(length, 0);\n    const startIndex = page * pageSize;\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 `${startIndex + 1} - ${endIndex} sur ${length}`;\n  };\n\n  return customPaginatorIntl;\n}\n

\n