如何获取MatPaginator分页数据加载开始与结束的事件通知？

你遇到的(page)事件仅在分页触发时执行、无法感知数据渲染完成的问题，可以通过以下几种方式解决：

方案1：结合渲染节点计数+AfterViewChecked钩子实现 #

该方案逻辑简单，适配大部分场景：

• 组件内声明isLoading加载状态变量、currentPageSize当前页大小变量，同时给列表渲染的外层容器绑定模板引用
• handlePage触发时立刻将isLoading设为true，打开loading提示，更新当前页大小后获取对应页数据
• 在ngAfterViewChecked钩子中判断列表容器渲染的子节点数量是否等于当前页大小，匹配则将isLoading设为false，关闭loading

参考代码如下：

import { Component, ViewChild, AfterViewChecked, ElementRef } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';

@Component({
  template: `
    <!-- 加载提示 -->
    <div *ngIf="isLoading" class="loading-mask">数据加载中，请稍候</div>
    <!-- 列表渲染容器 -->
    <div #listContainer class="data-list">
      <div *ngFor="let item of pageData">{{item.content}}</div>
    </div>
    <!-- 分页器 -->
    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100,500]"
      showFirstLastButtons
      (page)="handlePage($event)">
    </mat-paginator>
  `
})
export class DataListComponent implements AfterViewChecked {
  isLoading = false;
  pageData: any[] = [];
  currentPageSize = 10;
  @ViewChild('listContainer') listContainer!: ElementRef<HTMLElement>;

  handlePage(event: PageEvent) {
    this.isLoading = true;
    this.currentPageSize = event.pageSize;
    // 替换为你的数据获取逻辑，异步接口可在返回后赋值
    this.pageData = new Array(event.pageSize).fill(0).map((_,i) => ({
      id: i,
      content: `第${event.pageIndex+1}页-条目${i+1}`
    }));
  }

  ngAfterViewChecked() {
    if (this.isLoading && this.listContainer) {
      // 当渲染的条目数和页大小匹配时，判定渲染完成
      if (this.listContainer.nativeElement.childElementCount === this.currentPageSize) {
        this.isLoading = false;
      }
    }
  }
}

方案2：针对大数量卡顿的优化方案 #

你提到单页500条数据时浏览器卡顿，根源是一次性渲染了大量DOM节点，推荐直接用Angular CDK的虚拟滚动组件cdk-virtual-scroll-viewport，只会渲染可视区域内的DOM节点，无论单页是500条还是1000条都不会出现卡顿，也不需要额外监听渲染完成时机：

<cdk-virtual-scroll-viewport itemSize="40" class="list-viewport">
  <div *cdkVirtualFor="let item of pageData">{{item.content}}</div>
</cdk-virtual-scroll-viewport>

使用虚拟滚动需要先导入ScrollingModule到你的模块中。

注意事项 #

• 如果数据是从异步接口获取，需要在接口响应返回后再开始监听渲染状态，避免提前误判加载完成
• 若列表条目存在动态展开/折叠等会修改子节点数量的逻辑，可以额外加防抖逻辑避免状态误判

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