Как изменить itemsPerPageLabel в mat-paginator в Angular 6+
Я использую Angular 6.0.3 с Angular Material 7.1.0, у меня пагинатор находится в отдельном компоненте (это не 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 из Angular Material. Внутри массива поставщиков app.module.ts я вставил MyPaginatorLabel и MatPaginatorIntl.
В компоненте, который использует Angular MatPaginator, я расширяю класс MyPaginatorLabel и заставляю его конструктор вызывать метод super (), но после всего этого он отображает текст по умолчанию «itemsPerPage»
Что я здесь сделал не так ?? Кто-нибудь может мне подсказать?
Ответы 6
Создайте новый файл TypeScript и добавьте функцию, которая экспортируется и возвращает объект MatPaginatorIntl.
To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider - 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
]
})
this.dataSource.paginator._intl.itemsPerPageLabel ='Nombre de Session par page';
Пожалуйста, не публикуйте только код в качестве ответа, но также включайте объяснение того, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более качественные и с большей вероятностью получат положительные отзывы.
Не работает или, по крайней мере, недостаточно. Пожалуйста, объясните лучше ответ
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
ngOnInit() {
this.paginator._intl.itemsPerPageLabel = "Test String";
}
После объявления пагинатора этот текст можно изменить в ngOnInit ()
Я использую такой пагинатор. import { PageEvent, MatPaginator } from '@angular/material/paginator';@ViewChild('paginator') paginator: MatPaginator; В ngOnInit () я не могу получить пагинатор (undefined), вы знаете, где не так?
ты тоже можешь добавить html? Я не знаю, какова точная причина вашей проблемы, но проблема stackoverflow.com/questions/48785965/… может дать вам просветление
Полный пример с переводом "of" на основе примера Prashant Pimple
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;
}
Еще один способ добиться результата.
Модули приложений и компонентов определяют 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';
}
просто установите _intl на новый MatPaginatorIntl и установите свойства. Также установите для идентификатора mat-paginator значение '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>
Спасибо, Прашант Пимпале, это ответ на мой вопрос!