如何在Angular Material中扩展MatPaginator避免重复分页器实例？

你当前的实现存在一个核心逻辑误区：你既继承了MatPaginator类，又在自定义组件的模板里渲染了一个独立的MatPaginator实例，这就导致你的CustomPaginator本身（继承来的实例）根本没有被实际使用，反而要通过@ViewChild去获取模板里的另一个无关实例，完全违背了继承扩展的初衷。

下面是正确的扩展方式，让你无需嵌套实例，直接使用继承后的自定义分页器：

正确实现自定义分页器 #

方式1：仅添加自定义方法（复用原生模板） #

如果只是想给MatPaginator新增方法/属性，不需要修改UI，可以直接继承并配置元数据：

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

@Component({
  selector: 'app-custom-paginator',
  // 复用MatPaginator的原生模板，无需自己编写
  template: MatPaginator.prototype.template,
  styles: [],
  // 关键配置：告诉Angular这个组件可以作为MatPaginator的实现
  providers: [
    {
      provide: MatPaginator,
      useExisting: forwardRef(() => CustomPaginator)
    }
  ]
})
export class CustomPaginator extends MatPaginator {
  // 你的自定义方法
  customMethod(): number {
    return 1;
  }
}

方式2：自定义UI模板（保留原生功能） #

如果需要修改分页器的UI（比如添加自定义按钮、调整布局），可以复制MatPaginator的原生模板代码到你的组件中，按需修改，同时继承类保留所有原生逻辑：

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

@Component({
  selector: 'app-custom-paginator',
  template: `
    <div class="mat-paginator-container" [class.mat-paginator-disabled]="disabled">
      <!-- 保留原生分页器的核心控件 -->
      <mat-form-field class="mat-paginator-page-size" *ngIf="pageSizeOptions.length > 0">
        <mat-label>{{pageSizeLabel}}</mat-label>
        <mat-select [(value)]="pageSize" (selectionChange)="handlePageSizeChange($event)">
          <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
            {{pageSizeOption}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <span class="mat-paginator-range-label">
        {{getRangeLabel()}}
      </span>

      <div class="mat-paginator-navigation">
        <button mat-icon-button 
                (click)="previousPage()" 
                [disabled]="hasPreviousPage() === false"
                [attr.aria-label]="previousPageLabel">
          <mat-icon>chevron_left</mat-icon>
        </button>
        <button mat-icon-button 
                (click)="nextPage()" 
                [disabled]="hasNextPage() === false"
                [attr.aria-label]="nextPageLabel">
          <mat-icon>chevron_right</mat-icon>
        </button>
        <!-- 添加你的自定义控件 -->
        <button mat-button (click)="customAction()">自定义按钮</button>
      </div>
    </div>
  `,
  styles: [
    `/* 自定义样式 */`
  ],
  providers: [
    {
      provide: MatPaginator,
      useExisting: forwardRef(() => CustomPaginator)
    }
  ]
})
export class CustomPaginator extends MatPaginator {
  customMethod(): number {
    return 1;
  }

  customAction(): void {
    console.log('自定义分页器动作触发');
  }
}

主组件中使用自定义分页器 #

现在你可以在主组件中直接使用app-custom-paginator，无需额外处理，同时可以调用原生方法和自定义方法：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { CustomPaginator } from './custom-paginator.component';

@Component({
  selector: 'app-main-component',
  template: `
    <app-custom-paginator 
      [pageSize]="10" 
      [pageSizeOptions]="[5, 10, 20]">
    </app-custom-paginator>
  `,
})
export class MainComponent implements AfterViewInit {
  @ViewChild(CustomPaginator) paginator: CustomPaginator;

  ngAfterViewInit(): void {
    // 调用自定义方法
    console.log(this.paginator.customMethod()); // 输出 1
    // 调用MatPaginator原生方法
    this.paginator.nextPage();
  }
}

关键说明 #

1. 避免嵌套实例：不要在自定义分页器的模板里再写<mat-paginator>，你的CustomPaginator本身就是一个MatPaginator实例。
2. Provider配置：providers数组中的配置确保Angular可以将你的自定义组件识别为MatPaginator的实现，这样它可以直接和MatTable等组件配合使用（比如[paginator]="paginator"）。
3. 模板复用/自定义：如果不需要改UI，直接复用原生模板；如果需要自定义，复制原生模板代码后修改即可，原生的方法（如nextPage()、hasPreviousPage()）都可以直接使用。

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