Angular 12：如何在条件满足后切换Mat-paginator页码

核心问题分析 #

你用*ngIf="!currentPage"控制分页组件的显示逻辑，会导致currentPage有值时组件直接被销毁，根本没法触发页码跳转。而且依赖*ngIf重新渲染组件的方式，本身就不符合Angular的响应式设计思路。

解决方案 #

1. 移除*ngIf控制，改用响应式绑定 #

直接保留分页组件的渲染，通过pageIndex的条件绑定来控制跳转目标：

<!-- Pagination -->
<mat-paginator color="primary" 
               [hidden]="dataSource.totalItems === 0" 
               [length]="dataSource.totalItems"
               [pageSize]="dataSource.pageSize" 
               [pageIndex]="currentPage ? currentPage - 1 : dataSource.pageIndex - 1" 
               [pageSizeOptions]="pageSizeOptions"
               (page)="onPaginateChange($event)" 
               showFirstLastButtons>
</mat-paginator>

2. 组件类中同步页码状态 #

当currentPage更新时，手动同步到分页组件实例，确保数据和视图一致：

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

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  currentPage?: number;
  // 其他变量...

  ngAfterViewInit() {
    // 初始化时如果有缓存的页码，直接设置
    if (this.currentPage) {
      this.paginator.pageIndex = this.currentPage - 1;
      // 可选：触发分页事件同步数据源
      this.paginator.page.emit({
        pageIndex: this.paginator.pageIndex,
        pageSize: this.paginator.pageSize,
        length: this.paginator.length
      });
    }
  }

  // 编辑完成后更新页码时同步到组件
  setCurrentPage(page: number) {
    this.currentPage = page;
    if (this.paginator) {
      this.paginator.pageIndex = page - 1;
      // 若需重新加载数据，触发分页事件
      this.paginator.page.emit({
        pageIndex: this.paginator.pageIndex,
        pageSize: this.paginator.pageSize,
        length: this.paginator.length
      });
    }
  }

  onPaginateChange(event: any) {
    this.currentPage = event.pageIndex + 1;
    // 处理数据源分页逻辑
    // ...
  }
}

3. 关键注意事项 #

• Mat-paginator的pageIndex是从0开始计数的，你的currentPage是从1开始，所以要做-1的转换
• 避免用*ngIf销毁组件，改用[hidden]或者让组件始终存在，通过数据绑定控制状态
• 如果currentPage是从路由/服务中获取的，要等数据加载完成后再设置分页组件页码，避免未初始化报错

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