Question

我使用角度材质。如何在分页中更改标签中的文本？用于页面尺寸选择器的标签。

我尝试这样做，但没有帮助：

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [itemsPerPageLabel]="['The amount of data displayed']" showFirstLastButtons></mat-paginator>

Answer 1

嗯，这似乎是mat-paginator从一开始就存在的问题，并且已经讨论过here，所以我想建议您围绕创建一个文件的方法提出同样的建议，请注意，在此文件中我们正在提供标签。该类扩展了magpaginator，在主文件中，我们表明我们正在使用自定义类进行分页。

称为CustomMatPaginatorIntl

像这样

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

@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  constructor() {
    super();  

    this.getAndInitTranslations();
  }

  getAndInitTranslations() {

      this.itemsPerPageLabel = "test";
      this.nextPageLabel = "test";
      this.previousPageLabel = "test";
      this.changes.next();

  }

 getRangeLabel = (page: number, pageSize: number, length: number) =>  {
    if (length === 0 || pageSize === 0) {
      return `0 / ${length}`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} / ${length}`;
  }
}

并将其导入main.ts文件中的提供程序

 providers: [{
      provide: MatPaginatorIntl, 
      useClass: CustomMatPaginatorIntl
    }]

Demo

您可以保留必需的东西，删除的将用于原始课程

Answer 2

MatPaginator 允许您使用 MatPaginatorIntl 类更改分页器标签。

您可以翻译：

itemsPerPageLabel
nextPageLabel
previousPageLabel
firstPageLabel
lastPageLabel
getRangeLabel

我使用 translateMatPaginator 方法创建了 localizationService ：

    translateMatPaginator(paginator: MatPaginator) {
      paginator._intl.firstPageLabel = '<custom label here>';
      paginator._intl.itemsPerPageLabel = '<custom label here>';
      paginator._intl.lastPageLabel = '<custom label here>';
      paginator._intl.nextPageLabel = '<custom label here>';
      paginator._intl.previousPageLabel = '<custom label here>';
    }

您只需要将其注入组件并调用：

    this.localizationService.translateMatPaginator(paginator);

Answer 3

使用 childView 访问 .ts 文件中的分页器，如下所示：

@ViewChild(MatPaginator) paginator: MatPaginator;
  
ngOninit() {
    this.paginator._intl.itemsPerPageLabel = 'your custom text';
}

Answer 4

您也可以直接在分页实例中执行此操作。例如，如果要将逗号添加到分页器标签。

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

  decimalPipe = new DecimalPipe(navigator.language);

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel = 'Per page';
    this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number) => {
      const start = page * pageSize + 1;
      const end = (page + 1) * pageSize;
      return `${start} - ${end} of ${this.decimalPipe.transform(length)}`;
    };
  }

如何在分页中更改标签中的文本？

4 个答案: