如何在 Angular 6+ 中的 mat-paginator 中更改 itemsPerPageLabel [英] How To Change itemsPerPageLabel in mat-paginator in Angular 6+
问题描述
我将 Angular 6.0.3 与 Angular Material 7.1.0 一起使用,我的分页器位于一个单独的组件中(不是 app.component).到目前为止我尝试过的:
I am using Angular 6.0.3 with Angular Material 7.1.0, I have my paginator in a separate component (that is not the app.component). What I have tried so far:
创建名为 myPagniator.ts 的单独 ts 文件:
Created separate ts file called 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 中:我从 Angular Material 中导入了 MatPaginatorModule、MatPaginatorIntl.在 app.module.ts 的 providers 数组中,我放入了 MyPaginatorLabel 和 MatPaginatorIntl.
In my app.module.ts : I imported both MatPaginatorModule, MatPaginatorIntl from Angular Material. Inside providers array of app.module.ts, I put in MyPaginatorLabel and MatPaginatorIntl.
在使用 Angular MatPaginator 的组件中,我扩展了 MyPaginatorLabel 类并让它的构造函数调用 super() 方法,在所有这些之后它仍然显示默认文本itemsPerPage"
In the component which is using Angular MatPaginator, I extends MyPaginatorLabel class and have its constructor calls super() method, still it displays default text "itemsPerPage" after all this
我在这里做错了什么??有人能给我一点提示吗?
What have I done wrong here ?? Can someone give me a bit of hint ?
推荐答案
创建一个新的 TypeScript 文件并添加一个导出的函数并返回一个 MatPaginatorIntl
对象.
Create a new TypeScript file and add a function that is exported and returns a MatPaginatorIntl
object.
要修改显示的标签和文本,请创建 MatPaginatorIntl 的新实例并将其包含在自定义提供程序中 - Angular Material - Paginator > API
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() }
]
})
您还可以为特定组件设置设置,例如:
You can also set the setting for a particular component like:
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
]
})
这篇关于如何在 Angular 6+ 中的 mat-paginator 中更改 itemsPerPageLabel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!