Ng ZORRO分页组件启用nzShowSizeChanger时，如何自定义UI中的“page”文本？

这个问题我之前做项目时也碰到过，NG-ZORRO确实没有直接提供单独的输入属性来修改这个“page”文本，但有两种官方支持的标准实现方式可以搞定：

方法一：全局统一修改——利用国际化（i18n）配置 #

NG-ZORRO的分页组件里的这类文案都是通过国际化系统管理的，我们可以通过自定义语言包来全局替换所有分页组件的文本：

1. 先导入NG-ZORRO的国际化模块和对应语言的默认包（比如英文环境用en_US，中文用zh_CN）
2. 创建自定义语言配置对象，继承默认配置并修改分页相关的字段
3. 通过NzI18nService设置这个自定义配置

举个英文环境的代码示例：

import { Component, OnInit } from '@angular/core';
import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private nzI18nService: NzI18nService) {}

  ngOnInit(): void {
    // 自定义英文语言配置，替换分页里的"page"文本
    const customEnUS = {
      ...en_US,
      pagination: {
        ...en_US.pagination,
        page: 'Items', // 改成你想要的文本，比如"条目"或其他自定义内容
        items_per_page: '/ per page' // 如果要修改"/ page"部分，也可以在这里调整
      }
    };
    // 应用自定义语言包
    this.nzI18nService.setLocale(customEnUS);
  }
}

这种方法适合需要所有分页组件统一修改文本的场景。

方法二：局部单独修改——使用自定义模板（nzTotalTemplate） #

如果只想修改某一个分页组件的文本，不想影响全局，那可以用分页组件提供的自定义模板功能，直接覆盖默认显示：

在组件的HTML模板里这样写：

<nz-pagination
  [nzTotal]="1000"
  [nzShowSizeChanger]="true"
  [nzPageSizeOptions]="[20,50,100]"
>
  <!-- 自定义分页底部显示模板，let-pageSize会自动获取当前选中的每页条数 -->
  <ng-template #nzTotalTemplate let-pageSize="pageSize">
    <span>自定义文本 / {{ pageSize }}</span>
  </ng-template>
</nz-pagination>

这种方式灵活性很高，想改成什么文本都可以，完全不受默认文案限制。

两种方法都是NG-ZORRO官方支持的标准实现，你可以根据自己的需求选择~

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