Как изменить itemsPerPageLabel в mat-paginator в Angular 6+ - PullRequest
Новая
       41

Как изменить itemsPerPageLabel в mat-paginator в Angular 6+

0 голосов
/ 06 января 2019

Я использую Angular 6.0.3 с Angular Material 7.1.0, у меня есть мой paginator в отдельном компоненте (это не app.component). Что я пробовал до сих пор:

Создан отдельный файл ts с именем myPagniator.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: я импортировал оба MatPaginatorModule, MatPaginatorIntl из углового материала. Внутри массива провайдеров app.module.ts я помещаю в MyPaginatorLabel и MatPaginatorIntl.

В компоненте, использующем Angular MatPaginator, я расширяю класс MyPaginatorLabel и его конструктор вызывает метод super (), однако после всего этого

отображается текст по умолчанию "itemsPerPage"

Что я здесь не так сделал ?? Может кто-нибудь дать мне немного подсказки?

1 Ответ

0 голосов
/ 06 января 2019

Создайте новый файл 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

...