Angular 5 Material中如何用mat-paginator显示页码？

嘿，我来帮你搞定这个问题！Angular Material的mat-paginator其实本身就支持直接点击页码切换的效果，只是默认配置可能没完全贴合你的需求，咱们一步步来调整，实现类似ngx-paginator的体验：

一、基础配置：开启默认页码显示 #

首先确保你的项目已经正确导入了Material分页器模块，然后通过简单的属性配置就能开启页码按钮：

1. 模块导入（确保不会漏） #

在你的根模块或功能模块中导入必要的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatPaginatorModule } from '@angular/material/paginator';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, MatPaginatorModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 模板中配置分页器 #

在组件模板里添加mat-paginator，并设置关键属性：

<mat-paginator
  [length]="totalDataCount"
  [pageSize]="currentPageSize"
  [pageSizeOptions]="[5, 10, 20]"
  showFirstLastButtons="true"
  (page)="handlePageChange($event)"
></mat-paginator>

属性说明：

• length：总数据条数，用来计算总页数
• pageSize：当前每页显示的条数
• pageSizeOptions：给用户提供可选的每页条数下拉选项
• showFirstLastButtons：强制显示「首页」和「末页」按钮，更贴近ngx-paginator的使用习惯

3. 组件类中的逻辑处理 #

在组件.ts文件中定义对应变量和分页回调方法：

import { Component } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  totalDataCount = 120; // 模拟总数据量
  currentPageSize = 10; // 默认每页10条

  handlePageChange(event: PageEvent) {
    this.currentPageSize = event.pageSize;
    const currentPageNum = event.pageIndex + 1; // mat-paginator的pageIndex从0开始计数
    console.log(`切换到第${currentPageNum}页，每页显示${this.currentPageSize}条`);
    // 这里写你的分页数据请求逻辑，比如调用接口获取对应页码的数据
  }
}

二、进阶：自定义页码显示样式/数量 #

如果默认的页码按钮显示数量太少（比如总页数多时会折叠成省略号），可以通过CSS调整：

/* 让页码列表不折叠，显示更多页码按钮 */
.mat-paginator-page-list {
  max-width: none !important;
}

如果想要完全自定义页码样式（比如显示所有页码、高亮当前页），可以自己封装一个页码按钮组，配合mat-paginator的核心逻辑：

自定义页码模板 #

<!-- 自定义页码按钮组 -->
<div class="custom-page-nav">
  <button 
    *ngFor="let pageNum of allPageNumbers"
    (click)="jumpToPage(pageNum - 1)"
    [class.active-page]="pageNum === currentPage"
  >
    {{ pageNum }}
  </button>
</div>

<!-- 隐藏原生mat-paginator，只复用它的分页逻辑 -->
<mat-paginator
  [length]="totalDataCount"
  [pageSize]="currentPageSize"
  [pageIndex]="currentPageIndex"
  (page)="handlePageChange($event)"
  style="display: none;"
></mat-paginator>

组件类补充逻辑 #

currentPageIndex = 0;
currentPage = 1;
allPageNumbers: number[] = [];

ngOnInit() {
  this.generatePageNumbers();
}

// 生成所有页码数组
generatePageNumbers() {
  const totalPages = Math.ceil(this.totalDataCount / this.currentPageSize);
  this.allPageNumbers = Array(totalPages).fill(0).map((_, index) => index + 1);
}

// 跳转到指定页码
jumpToPage(pageIndex: number) {
  this.currentPageIndex = pageIndex;
  this.currentPage = pageIndex + 1;
  // 手动触发分页事件，同步数据
  const pageEvent: PageEvent = {
    pageIndex,
    pageSize: this.currentPageSize,
    length: this.totalDataCount
  };
  this.handlePageChange(pageEvent);
}

// 重写分页回调，更新页码数组
handlePageChange(event: PageEvent) {
  this.currentPageSize = event.pageSize;
  this.currentPageIndex = event.pageIndex;
  this.currentPage = event.pageIndex + 1;
  this.generatePageNumbers(); // 每页条数变化时重新生成页码
  // 数据请求逻辑...
}

自定义样式 #

.custom-page-nav button {
  margin: 0 4px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.custom-page-nav button.active-page {
  background: #1976d2;
  color: #fff;
  border-color: #1976d2;
}

注意事项 #

• 确保你的@angular/material版本和Angular 5完全匹配（建议用5.x版本），避免兼容性问题
• 自定义页码时，一定要和mat-paginator的pageIndex保持同步，不然分页逻辑会混乱
• 当总数据条数发生变化时，记得更新length属性并重新生成页码数组

内容的提问来源于stack exchange，提问作者Khadhar Koneti