Angular material中自定义分页信息

37次阅读

共计 987 个字符,预计需要花费 3 分钟才能阅读完成。

在项目开发中,用到了 Material 的分页组件,需要对该组件进行汉化。

首先创建自定义汉化类:
import {MatPaginatorIntl} from ‘@angular/material’;

export class MatPaginatorIntlCro extends MatPaginatorIntl {
/** A label for the page size selector. */
itemsPerPageLabel = ‘ 每页条数: ‘;
/** A label for the button that increments the current page. */
nextPageLabel = ‘ 下一页 ’;
/** A label for the button that decrements the current page. */
previousPageLabel = ‘ 上一页 ’;
/** A label for the button that moves to the first page. */
firstPageLabel = ‘ 首页 ’;
/** A label for the button that moves to the last page. */
lastPageLabel = ‘ 尾页 ’;
/** A label for the range of items within the current page and the length of the whole list. */
getRangeLabel = (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) {
return ‘0 od’ + 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} 条 `;
}
}
在 app.module.ts 中声明该 Provider:
providers: [
{provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}
]
这样在再使用分页组件时,相关信息将显示中文。

正文完
 0