Angular 14中如何仅重写MatPaginator的单个方法而非整个组件？

1. 创建自定义分页器组件 #

继承MatPaginator并重写目标方法，直接复用原组件的模板和样式，避免重复实现UI结构：

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

@Component({
  selector: 'mat-paginator', // 与原组件选择器保持一致，无需修改模板标签
  templateUrl: '@angular/material/paginator/paginator.html',
  styleUrls: ['@angular/material/paginator/paginator.css']
})
export class CustomMatPaginatorComponent extends MatPaginator {
  // 重写需要自定义的方法，示例：修改nextPage逻辑
  override nextPage(): void {
    // 插入你的自定义业务逻辑
    console.log('执行自定义分页前置操作');
    // 可选：调用父类原方法保留基础分页功能
    super.nextPage();
  }
}

2. 在目标模块中配置替换 #

在需要生效的单个模块内，声明自定义组件并通过依赖注入替换MatPaginator的默认实现：

import { NgModule } from '@angular/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatIconModule } from '@angular/material/icon'; // 原组件依赖的图标模块
import { CustomMatPaginatorComponent } from './custom-mat-paginator.component';

@NgModule({
  imports: [
    MatPaginatorModule,
    MatIconModule // 必须导入，原模板使用了mat-icon组件
  ],
  declarations: [CustomMatPaginatorComponent],
  providers: [
    // 模块内全局替换MatPaginator的实例
    { provide: MatPaginator, useClass: CustomMatPaginatorComponent }
  ],
  exports: [CustomMatPaginatorComponent] // 若需给模块内其他组件导出使用
})
export class YourFeatureModule { }

核心原理 #

• 自定义组件通过与原组件相同的selector，确保模板中仍能使用<mat-paginator>标签，无需修改现有代码
• 模块级的providers配置，让Angular在当前模块及子模块范围内，实例化自定义组件而非原生MatPaginator
• 复用原组件的模板和样式，避免重复编写UI代码，仅聚焦于目标方法的重写

注意事项 #

• Angular 14对应TypeScript 4.7，支持override关键字，重写父类方法时必须添加该关键字以符合TS规范
• 若原组件依赖其他Angular Material模块（如MatIconModule），必须在目标模块中导入，否则模板会报错
• 该方案仅在当前配置的模块内生效，不会影响项目中其他未导入该模块的区域

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