如何在 mat-paginator (Angular 4) 中更改 itemsPerPageLabel

Question

我正在使用 Angular 4，我需要更改分页器的值“每页项目数”。我怎样才能得到这个值？

HTML：

<mat-paginator class="mat-paginator" #paginator [length]="table_data && table_data.resultsLength" [pageSizeOptions]="[10, 25, 100]" [pageSize]="customerMessageService.rowsNumber">
</mat-paginator>

在文档中说：

To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider

我从“@angular/material”导入了 {MatPaginatorModule} 并将 MatPaginatorIntl 放在提供者中。

那么我应该在我的 .ts 文件中做什么？

将它放在我的 component.ts 中是否正确？

export class MatPaginatorIntl {
  itemsPerPageLabel = "1234";
}

Answer 1

要自定义/更改 itemsPerPageLabel，我们需要在您的 Component 类中扩展 MatPaginatorIntl 类，并且还需要在您的模块内的 providers 数组中提供。

app.component.ts -

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

export class AppComponent extends MatPaginatorIntl {

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

  constructor() {
    super();
  }
}

app.component.html-

 <mat-paginator> </mat-paginator>

app.module.ts-

import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    MatPaginatorModule
  ]
    providers: [
    { provide: MatPaginatorIntl, useClass: AppComponent }
  ]
})

我们还可以从 MatPaginatorIntl 类更改以下标签：-

• itemsPerPageLabel：字符串；
  （页面大小选择器的标签。）
• nextPageLabel：字符串；
  （增加当前页面的按钮的标签。）
• 上一页标签：字符串；
  （减少当前页面的按钮的标签。）
• firstPageLabel: 字符串；
  （减少当前页面的按钮的标签。）
• lastPageLabel: 字符串；
  （移动到最后一页的按钮的标签。）