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>