Angular Material Table分页：REST请求触发及自定义DataSource事件处理

嘿，我来分享下我处理Angular Material Table分页请求的经验，刚好能解决你的问题！

首先明确一点：当你已经实现了自定义DataSource，完全不需要显式监听分页按钮的点击事件。MatPaginator本身提供了page事件Observable，它会捕获所有分页操作（点击下一页/上一页、跳转页码、修改每页条数），我们只需要订阅这个事件来触发REST请求即可，这是最优雅的处理方式。

具体实现步骤 #

1. 自定义DataSource中整合分页逻辑 #

把数据获取、分页事件订阅都封装在DataSource里，保持组件代码简洁，符合单一职责：

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { Observable, BehaviorSubject, of, tap } from 'rxjs';
import { catchError, finalize, switchMap } from 'rxjs/operators';
import { YourApiService } from './your-api.service';
import { YourDataModel } from './your-data.model';

export class CustomDataSource extends DataSource<YourDataModel> {
  private dataSubject = new BehaviorSubject<YourDataModel[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);
  public loading$ = this.loadingSubject.asObservable();

  constructor(
    private apiService: YourApiService,
    private paginator: MatPaginator
  ) {
    super();
  }

  connect(): Observable<YourDataModel[]> {
    // 订阅分页事件，每次分页变化触发API请求
    return this.paginator.page.pipe(
      switchMap(() => {
        this.loadingSubject.next(true);
        // 传递分页参数给后端API，注意pageIndex从0开始，后端可能需要从1开始
        return this.apiService.fetchData(
          this.paginator.pageIndex + 1,
          this.paginator.pageSize
        ).pipe(
          catchError(() => of([])), // 错误处理，返回空数组避免表格崩溃
          finalize(() => this.loadingSubject.next(false))
        );
      }),
      tap(data => this.dataSubject.next(data)) // 更新数据，表格自动刷新
    );
  }

  disconnect(): void {
    // 清理订阅，避免内存泄漏
    this.dataSubject.complete();
    this.loadingSubject.complete();
  }
}

2. 组件中关联DataSource和Paginator #

在组件里获取MatPaginator实例，初始化DataSource，并触发第一页数据的加载：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { CustomDataSource } from './custom-data-source';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  dataSource!: CustomDataSource;

  constructor(private apiService: YourApiService) { }

  ngOnInit(): void {
    this.dataSource = new CustomDataSource(this.apiService, this.paginator);
  }

  ngAfterViewInit(): void {
    // 手动触发一次page事件，加载初始第一页数据
    this.paginator.page.emit();
  }
}

3. 模板中配置表格和分页器 #

确保模板里的mat-table绑定到dataSource，并正确关联mat-paginator：

<div class="mat-elevation-z8">
  <mat-table [dataSource]="dataSource">
    <!-- 你的列定义示例 -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> 名称 </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator
    [pageSizeOptions]="[5, 10, 20]"
    showFirstLastButtons
    aria-label="Select page of data">
  </mat-paginator>
</div>

<!-- 可选：加载状态提示 -->
<div *ngIf="dataSource.loading$ | async" class="loading-overlay">
  <mat-spinner></mat-spinner>
</div>

为什么这是最佳方式？ #

• 覆盖所有分页场景：page事件不仅响应下一页点击，还包括上一页、页码跳转、每页条数修改，比单独监听按钮点击更全面。
• 职责分离：数据获取逻辑封装在DataSource，组件只负责初始化和视图渲染，代码更易维护。
• 自动更新表格：当dataSubject更新数据时，表格会自动刷新，无需手动调用刷新方法。
• 内存安全：在disconnect()里清理订阅，避免内存泄漏。

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