typescript - 如何在 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 的提供程序数组中，我放入了 MyPaginatorLabel 和 MatPaginatorIntl。

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

我做错了什么？？有人可以给我一些提示吗？

Answer 1

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

To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider - 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