Angular Material踩坑指南3——分页组件汉化

 

 

2020年11月12日13:27:46

分页组件老是显示英文，虽说简单，但是不好看。

1.新建一个文件：my-paginator.ts

2.代码：

import { MatPaginatorIntl } from '@angular/material/paginator';  //引入分页组件配置的module


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(): any {
  const paginatorIntl = new MatPaginatorIntl();
  paginatorIntl.itemsPerPageLabel = '每页数据条数:';
  paginatorIntl.nextPageLabel = '下一页';
  paginatorIntl.previousPageLabel = '上一页';
  paginatorIntl.firstPageLabel = '首页';
  paginatorIntl.lastPageLabel = '尾页';
  paginatorIntl.getRangeLabel = dutchRangeLabel;

  return paginatorIntl;
}

也没什么好说的，自己试验一下就知道了。

主要还是通过导入MatPaginatorIntl 这个组件，增加了对分页组件的修改的几个参数和方法，可以顺便学习Intl这类组件是这么使用的。

3. 在app.module.ts文件中的provider这个中括号里添加代码，重点是注释的一行，

  providers: [
    { provide: MatPaginatorIntl, useValue: myPaginator() },  // 2
    { provide: LOCALE_ID, useValue: 'zh-Hans' }    // 1
  ],

还要顺便导入 （vscode会提示少东西了，然后给建议，建议就是导入这个。）

import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';

然后运行就可以了。