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

Question

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

我尝试这样做但没有帮助:

<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

你可以保留需要的东西，移除一个会从原来的类中使用