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

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 的providers数组中，我放入了MyPaginatorLabel和MatPaginatorIntl。

在使用 Angular MatPaginator 的组件中，我扩展了 MyPaginatorLabel 类并让它的构造函数调用 super() 方法，但在这之后它仍然显示默认文本“itemsPerPage”

我在这里做错了什么？有人可以给我一点提示吗？

Answer 1

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

堆栈闪电战

Answer 2

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

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

  }

声明分页器后，可以在 ngOnInit() 中修改此文本

Answer 3

实现结果的另一种方法。

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

Answer 4

基于 Prashant Pimpale 示例翻译“of”的完整示例

export function CustomPaginator(): MatPaginatorIntl {
  const customPaginatorIntl = new MatPaginatorIntl();

  customPaginatorIntl.itemsPerPageLabel = 'Items par page :';
  customPaginatorIntl.nextPageLabel = 'Page suivante';
  customPaginatorIntl.firstPageLabel = 'Première page';
  customPaginatorIntl.lastPageLabel = 'Dernière page';
  customPaginatorIntl.previousPageLabel = 'Page précédente';
  customPaginatorIntl.getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) {
      return `0 à ${length }`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} sur ${length}`;
  };

  return customPaginatorIntl;
}

Answer 5

基于 ngx-translate 和 Observable 的完整解决方案，因此支持在应用程序中切换语言。

创建 MatPaginatorIntl 的子类，在其中注入 TranslateService。在构造函数中翻译分页器标签并侦听语言更改以触发相同的操作。 rangeLabel 通过 startIndex、endIndex 和 length 变量的插值进行翻译。

import {MatPaginatorIntl} from "@angular/material/paginator";
import {TranslateParser, TranslateService} from "@ngx-translate/core";
import {Injectable, OnDestroy} from "@angular/core";
import {Subject} from "rxjs";
import {takeUntil} from 'rxjs/operators';

/* Sources:
https://medium.com/front-dev/translate-your-matpaginator-with-ngx-translate-and-stay-reactive-4c7b145cae9
https://www.mariokandut.com/how-to-translate-matpaginator-angular/
*/
@Injectable()
export class TranslatedMatPaginator extends MatPaginatorIntl implements OnDestroy {

  private unsubscribe: Subject<void> = new Subject<void>();

  private translatedRangeLabel: string = '';

  constructor(private translateService: TranslateService, private translateParser: TranslateParser) {
    super();

    this.translateService.onLangChange
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => {
        this.getAndInitTranslations();
      });

    this.getAndInitTranslations();
  }

  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }

  getAndInitTranslations() {
    this.translateService.stream([
      'paginator.first.page',
      'paginator.items.per.page',
      'paginator.last.page',
      'paginator.next.page',
      'paginator.previous.page',
      'paginator.range'
    ])
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(translation => {
        this.firstPageLabel = translation['paginator.first.page'];
        this.itemsPerPageLabel = translation['paginator.items.per.page'];
        this.lastPageLabel = translation['paginator.last.page'];
        this.nextPageLabel = translation['paginator.next.page'];
        this.previousPageLabel = translation['paginator.previous.page'];
        this.translatedRangeLabel = translation['paginator.range'];

        this.changes.next();
      });
  }

  getRangeLabel = (page: number, pageSize: number, length: number) => {
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;

    let translation = this.translateParser.interpolate(this.translatedRangeLabel, {startIndex, endIndex, length});
    if (translation) {
      return translation;
    }

    return this.translatedRangeLabel;
  };
}

在模块代码中添加一个提供程序，每当需要 MatPaginatorIntl 实例时，它基本上都会返回自定义翻译子类的实例。 在app.module.ts或material.module.ts中

import {TranslatedMatPaginator} from "./translated-mat-paginator";
...
providers: [
    {provide: MatPaginatorIntl, useClass: TranslatedMatPaginator},
  ]

Answer 6

只需将 _intl 设置为新的 MatPaginatorIntl 并设置属性。还将 mat-paginator id 设置为“paginator”。

import {MatPaginator, MatPaginatorIntl} from '@angular/material/paginator';

@ViewChild('paginator') set paginator(pager:MatPaginator) {
    if (pager) {
      this.dataSource.paginator = pager;
      this.dataSource.paginator._intl = new MatPaginatorIntl()
      this.dataSource.paginator._intl.itemsPerPageLabel = "bla bla bla";
    }
  }


<mat-paginator #paginator [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>

Answer 7

你也可以用 CSS 来伪造它

.mat-mdc-paginator {
  .mat-mdc-paginator-page-size {
    &:before {
      content: 'Rows per page:';
    }
  }
  .mat-mdc-paginator-page-size-label {
    display: none;
  }
}

Answer 8

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