如何修改Material Paginator的默认标签以适配多语言及RTL样式？

Material Paginator完全支持自定义标签，针对RTL（从右到左）布局的应用，有两种常用实现方式：

一、单个分页器局部自定义 #

直接在模板中通过输入属性指定各标签文本，适合只需要修改某一个分页器的场景：

<mat-paginator
  [pageSizeOptions]="[5, 10, 20]"
  previousPageLabel="上一页"
  nextPageLabel="下一页"
  firstPageLabel="首页"
  lastPageLabel="末页"
  itemsPerPageLabel="每页显示:"
></mat-paginator>

RTL样式会自动适配这些自定义标签的排版，无需额外调整控件布局方向。

二、全局统一配置自定义标签 #

如果整个应用需要统一替换分页器标签，推荐使用MAT_PAGINATOR_INTLS注入令牌实现全局配置：

1. 创建自定义分页器国际化服务 #

新建custom-paginator-intl.ts文件：

import { MatPaginatorIntl } from '@angular/material/paginator';

export class CustomPaginatorIntl extends MatPaginatorIntl {
  override itemsPerPageLabel = '每页条数:';
  override nextPageLabel = '下一页';
  override previousPageLabel = '上一页';
  override firstPageLabel = '首页';
  override lastPageLabel = '末页';

  // 自定义数据范围提示文本
  override getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0) return '无数据';
    const start = page * pageSize + 1;
    const end = Math.min(start + pageSize - 1, length);
    return `${start} - ${end} / 共 ${length} 条`;
  };
}

2. 在模块中注册自定义服务 #

在AppModule或核心模块中替换默认的国际化服务：

import { NgModule } from '@angular/core';
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
import { CustomPaginatorIntl } from './custom-paginator-intl';

@NgModule({
  imports: [MatPaginatorModule],
  providers: [
    { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }
  ]
})
export class AppModule {}

RTL布局额外说明 #

确保应用已正确开启RTL支持：

• 在index.html的<html>标签添加dir="rtl"
• 或通过Angular CLI配置样式文件引入RTL主题

配置完成后，分页器的控件（如页码选择器、跳转按钮）会自动调整为从右到左的布局，自定义标签也会适配文本方向。

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