Angular完整项目开发12 - 分页（Paginator）与中文显示（本地化）

制作Angular的分页功能，采用Angular Material的Paginator组件，官方文档略晦涩，坑不少，费了不少功夫完成了，整理如下：

1.分页功能

HTML:

<mat-paginator [length]="length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  (page)="onPageChange($event)" style="width: 100%;">
</mat-paginator>

TS:

//分页
length=0;
pageSize = 5;
page = 0;
pageSizeOptions: number[] = [5, 10, 25, 100];

//当前页变化时执行
onPageChange(pageEvent: PageEvent){
    this.page = pageEvent.pageIndex; //设置当前页
    this.pageSize = pageEvent.pageSize; //设置一页记录数
    this.getDevice(); //查询数据
}

//查询
getDevice() {
    let filter={
      'page':this.page,
      'size':this.pageSize
    };
    this.deviceService.getDevice(filter).subscribe(
      (data:any)=>{ 
        this.devices = data.content;
        this.length = data.totalElements;
      }
    );
  }

效果1：每页5条记录

效果2：每页10条记录

分页功能制作完成。

2. 分页标签的中文显示

Angular Material 默认的Paginator是英文的，现在要把它改成中文显示，网上找了几个方案，没有特别简单的，都需要另外加一个类实现，直接抄过来的也都有一些报错，无法运行。

仔细看了一下官方文档，再结合Github上找到的例子，搞定了。

根据官方文档的说法，如果要改变文字显示，要增加一个MatPaginatorIntl的新实例，作为provider使用。

本地化显示的类：paginator.translate.ts， 注意：@Injectable()必须声明，不然总有奇怪的报错。

import { Injectable } from "@angular/core";
import { MatPaginatorIntl } from "@angular/material/paginator";

@Injectable() //必须有
export class MatPaginatorIntlCN extends MatPaginatorIntl { //起名为MatPaginatorIntlCN，针对中文
    itemsPerPageLabel = '每页数量'; 
    nextPageLabel     = '下一页';
    previousPageLabel = '上一页';
    firstPageLabel = '首页';
    lastPageLabel = '尾页';
  
    getRangeLabel = function (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;
    };
  }

app.module.ts

import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
import { MatPaginatorIntlCN } from '../app/common/paginator.translate'
...
imports: [
   ...
   MatPaginatorModule
],
providers: [ //注意：用useClass
    { provide: MatPaginatorIntl, useClass: MatPaginatorIntlCN }
],

效果：

 

参考：

https://stackoverflow.com/questions/45278805/md-paginator-how-i-can-get-the-next-or-prev-click-event

https://github.com/angular/components/issues/8239

https://material.angular.io/components/paginator/api

https://github.com/eduardomq/MatPaginatorIntlEsp/blob/master/mat-paginator-intl-esp.service.ts