angluar material分页中文 MatPaginatorIntl

文章转载自：https://blog.csdn.net/power0405hf/article/details/79630348

angular自带的翻页是英文的，不符合项目要求。然后在网上找到了答案，在此记录：

0.导入MatPaginatorModule
1.新建一个my-paginator.ts文件

内容：

import { MatPaginatorIntl } from '@angular/material';


const dutchRangeLabel = (page: number, pageSize: number, length: number) => {
  if (length === 0 || pageSize === 0) { return `0 到 ${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}条`;

}

export function myPaginator() {

  const paginatorIntl = new MatPaginatorIntl();

  paginatorIntl.itemsPerPageLabel = '当前页数:';

  paginatorIntl.nextPageLabel = '下一页:';

  paginatorIntl.previousPageLabel = '上一页:';

  paginatorIntl.getRangeLabel = dutchRangeLabel;

  return paginatorIntl;

}

2.在module的providers里加入：

providers: [ { provide: MatPaginatorIntl, useValue: myPaginator() } ]

3. 正常的使用paginator组件

 

<mat-paginator [length]="100" [pageSize]="10"></mat-paginator>