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

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

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

  }

声明分页符后，可以在ngOnInit（）中修改此文本

Answer 2

创建一个新的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

Answer 3

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

Answer 4

实现结果的另一种方式。

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

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

4 个答案: