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

Question

我使用 Angular 材质。如何更改分页标签中的文本？用于页面大小选择器的标签。

我试过但没有帮助：

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

Answer 1

编写getRangeLabel的自定义版本

这是一种简单、灵活且功能强大的方法，允许您自定义完整的分页器文本，而不仅仅是其中的一部分。

在你的组件中，设置你的分页器：

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

然后在afterViewInit中分配一个自定义函数：

  ngAfterViewInit() {
    this.paginator._intl.getRangeLabel = this.getRangeDisplayText;
  }

然后设置一个自定义函数来显示你需要的文字：

getRangeDisplayText = (page: number, pageSize: number, length: number) => {
  const initialText = `Displaying users`;  // customize this line
  if (length == 0 || pageSize == 0) {
    return `${initialText} 0 of ${length}`;
  }
  length = Math.max(length, 0);
  const startIndex = page * pageSize;
  const endIndex = startIndex < length 
    ? Math.min(startIndex + pageSize, length) 
    : startIndex + pageSize;
  return `${initialText} ${startIndex + 1} to ${endIndex} of ${length}`; // customize this line
};

这将使用您在 HTML 中或在组件中配置的任何 pageSize 和 length。

  <mat-paginator [length]="dataSource.total"
      [pageSize]="10"
      hidePageSize
      showFirstLastButtons>

如果您的数据返回 50 条记录，则会显示以下文本：

显示 50 个用户中的第 1 到 10 个用户

Answer 2

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

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

Answer 3

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

你可以翻译：

• itemsPerPageLabel
• 下一页标签
• 上一页标签
• 第一页标签
• 最后一页标签
• 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 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)}`;
    };
  }

Answer 5

这似乎是 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

你可以保留需要的东西，从原来的类中删除的将使用