如何在Angular MatPaginator组件中自定义前后按钮替换默认按钮？

步骤1：隐藏默认分页导航按钮 #

通过CSS选择器定位到MatPaginator自带的前后按钮，将其隐藏：

/* 在组件样式文件中添加 */
.mat-paginator-navigation-previous,
.mat-paginator-navigation-next {
  display: none !important;
}

步骤2：添加自定义按钮并绑定分页逻辑 #

在组件模板中，在<mat-paginator>标签旁插入自定义按钮，通过ViewChild获取分页器实例，调用其内置方法实现分页功能：

模板代码：

<!-- 自定义分页按钮组 -->
<div class="custom-paginator-buttons">
  <button 
    class="custom-page-btn" 
    (click)="paginator.previousPage()"
    [disabled]="!paginator.hasPreviousPage()"
  >
    <!-- 可替换为自定义图标或文字，示例用左箭头 -->
    <span>←</span>
  </button>
  <button 
    class="custom-page-btn" 
    (click)="paginator.nextPage()"
    [disabled]="!paginator.hasNextPage()"
  >
    <!-- 可替换为自定义图标或文字，示例用右箭头 -->
    <span>→</span>
  </button>
</div>

<!-- 原有MatPaginator组件 -->
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

组件类代码：

import { Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('paginator') paginator!: MatPaginator;
}

步骤3：自定义按钮样式 #

根据期望效果编写CSS，示例实现圆形按钮样式：

.custom-paginator-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.custom-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.custom-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-page-btn:hover:not(:disabled) {
  background-color: #bdbdbd;
}

补充说明 #

• 若要使用Material图标替代文字箭头，需先导入MatIconModule，然后在按钮内使用<mat-icon>arrow_back</mat-icon>和<mat-icon>arrow_forward</mat-icon>。
• CSS中的!important用于确保覆盖Material默认样式，若组件开启了ViewEncapsulation.None可省略，但常规场景建议保留。

内容的提问来源于stack exchange，提问作者Shubham Kumar Sahu