UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载分页器Pagination是长列表数据展示中最常用的导航组件之一。本篇技术指南围绕 ng-zorro-antd 的 Pagination 组件以官方「基本Basic」示例为切入点系统讲解nz-pagination的最小可用用法、核心 API 参数与双向绑定方式并结合本仓库源码components/pagination深入解析页码渲染、边界校验与尺寸响应等底层实现帮助你从会用进阶到懂原理。基础用法两行代码完成分页官方 Basic 示例在 components/pagination/demo/basic.md 中官方给出了最简示例对应实现代码位于 components/pagination/demo/basic.tsimport { Component } from angular/core; import { NzPaginationModule } from ng-zorro-antd/pagination; Component({ selector: nz-demo-pagination-basic, imports: [NzPaginationModule], template: nz-pagination [nzPageIndex]1 [nzTotal]50 / }) export class NzDemoPaginationBasicComponent {}要点拆解使用Standalone 组件方式引入NzPaginationModule无需额外导入其他模块nz-pagination组件选择器定义见 pagination.component.ts只需两个核心输入即可渲染[nzTotal]50数据总条数[nzPageIndex]1当前页码从 1 开始。组件模板内部会根据nzTotal与默认的nzPageSize10计算出 5 页渲染出页码列表与上一页/下一页按钮。当页码超过 9 页时会自动折叠为第 1 页 省略跳转prev_5 / next_5 当前区间 末页的经典形态该折叠算法在 pagination-default.component.ts 的getListOfPageItem中实现lastIndex 9时全量渲染否则按selected 5、selected last - 3、其余情况三档生成区间页码与prev_5/next_5跳转项。在真实业务中接入数据把示例中的静态数字替换为业务变量即可实现与列表数据的联动nz-pagination [nzPageIndex]pageIndex [nzTotal]total [nzPageSize]pageSize (nzPageIndexChange)loadData($event) /需要刷新数据时监听(nzPageIndexChange)回调若希望组件内部维护页码也可使用双向绑定[(nzPageIndex)]pageIndex官方测试用例中即采用该写法见 pagination.spec.ts。核心 API 参数详解官方文档 components/pagination/doc/index.zh-CN.md 对nz-pagination给出了完整参数表以下结合源码逐项说明参数说明类型默认值全局配置[nzTotal]数据总数number--[nzPageIndex]当前页数可双向绑定number1-[nzPageSize]每页条数可双向绑定number10-[nzDisabled]是否禁用booleanfalse-[nzShowQuickJumper]是否可以快速跳转至某页booleanfalse✅[nzShowSizeChanger]是否可以改变nzPageSizebooleanfalse✅[nzSimple]当添加该属性时显示为简单分页boolean-✅[nzSize]当为small时是小尺寸分页small \| defaultdefault✅[nzResponsive]当nzSize未指定时根据屏幕宽度自动调整尺寸booleanfalse-[nzPageSizeOptions]指定每页可以显示多少条number[][10, 20, 30, 40]✅[nzItemRender]自定义页码结构TemplateRef{ $implicit: page \| prev \| next \| prev_5 \| next_5, page: number }--[nzShowTotal]显示数据总量和当前数据范围TemplateRef{ $implicit: number, range: [number, number] }--[nzHideOnSinglePage]只有一页时是否隐藏分页器booleanfalse-[nzAlign]对齐方式NzPaginationAlignstart-(nzPageIndexChange)页码改变的回调EventEmitternumber--(nzPageSizeChange)每页条数改变的回调EventEmitternumber--注nzAlign为 20.4.0 版本新增NzPaginationAlign start | center | end定义见 pagination.types.ts。关键输入在源码中的实现以上参数在 pagination.component.ts 中有直接对应关系几个值得注意的细节类型归一化nzTotal、nzPageIndex、nzPageSize通过numberAttribute转换字符串传入会被自动转为数字nzDisabled、nzSimple、nzHideOnSinglePage等布尔参数通过booleanAttribute转换因此模板中直接写nz-pagination nzSimple /也能生效全局配置nzSize、nzPageSizeOptions、nzShowSizeChanger、nzShowQuickJumper、nzSimple均标注了WithConfig()意味着这些参数可通过全局配置服务统一设置模块名pagination见NZ_CONFIG_MODULE_NAME定义实现全站分页样式一致性对齐方式nzAlign是唯一的input()信号式输入并在宿主元素上绑定ant-pagination-start/center/end三个 class 控制对齐见 pagination.component.ts。页码计算与边界校验源码中的核心逻辑总页数计算组件通过getLastIndex计算最后一页getLastIndex(total: number, pageSize: number): number { const maxPage pageSize 0 ? Math.ceil(total / pageSize) : 0; return maxPage || 1; }使用Math.ceil向上取整例如total50, pageSize10得到 5 页total51则得到 6 页当pageSize 0或total 0时返回至少 1 页避免除零与空页。页码越界自动修正validatePageIndexpagination.component.ts将页码钳制在[1, lastIndex]范围内小于 1 修正为 1大于末页修正为末页。该逻辑在三处被触发用户点击页码onPageIndexChange用户切换每页条数后若当前页超出新末页自动回落到最后一页onPageSizeChange数据总量变化如刷新后数据变少导致页码越界时通过total$流在下一个微任务中修正并刷新视图onTotalChange。这也解释了官方文档对nzTotal说明中数据总数这一简单描述背后的健壮性设计——组件保证任何输入组合下页码都不会越界。禁用态与 RTL 支持组件在宿主上绑定ant-pagination-disabled、ant-pagination-simple、ant-pagination-mini等 class见 pagination.component.ts并注入 CDK 的Directionality实现 RTL 方向支持ant-pagination-rtlclass页码项pagination-item.component.ts在disabled时点击事件直接短路且 prev/next 箭头图标会随方向自动左右互换prev在 RTL 下显示右箭头next反之。基础分页的进阶变体同一组件族的延伸用法「基本」示例是最简形态官方同目录下的其他演示components/pagination/demo展示了同一组件的进阶能力均可在基础用法上直接叠加演示核心参数效果simple.mdnzSimple极简分页仅上一页/下一页 输入框直接跳页输入回车跳转逻辑见 pagination-simple.component.tschanger.mdnzShowSizeChangernzPageSizeOptions显示每页条数切换下拉框jump.mdnzShowQuickJumper显示快速跳转输入框mini.mdnzSizesmall小尺寸分页宿主上ant-pagination-miniclassmore.mdnzItemRender自定义页码项渲染模板total.mdnzShowTotal显示共 N 条与当前数据范围渲染上下文为{ $implicit: total, range: [start, end] }range 计算见 pagination-default.component.tscontrolled.md[(nzPageIndex)]/[(nzPageSize)]受控模式页码/每页条数由外部状态驱动align.mdnzAlign左 / 中 / 右对齐item-render.mdnzItemRender结合prev_5/next_5深度自定义跳转项说明nzItemRender的模板上下文类型PaginationItemRenderContext$implicit: PaginationItemType其中PaginationItemType page | prev | next | prev_5 | next_5定义见 pagination.types.ts与官方文档参数表一一对应。国际化与样式定制文案国际化分页器的上一页/下一页/跳转提示等文案来自NzPaginationI18nInterface定义于 i18n/nz-i18n.interface.ts组件在ngOnInit中订阅localeChange自动响应语言切换pagination.component.ts主题样式组件样式入口为 pagination/style/index.less基于 Ant Design 的ant-pagination-*类名体系可通过项目整体的 less 主题定制如 components/ng-zorro-antd.less 引入统一调整间距、颜色与尺寸。小结从官方 Basic 示例出发你可以用nz-pagination [nzPageIndex]1 [nzTotal]50 /一行代码获得完整的分页能力理解nzTotal/nzPageIndex/nzPageSize三者与getLastIndex、validatePageIndex的联动后便能准确预判组件在数据变化、切换每页条数时的行为。进阶时再结合nzShowSizeChanger、nzShowQuickJumper、nzSimple、nzItemRender、nzShowTotal等参数即可覆盖从后台管理列表到数据看板的绝大多数分页场景。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd ColorPicker 基本用法从 nz-color-picker / 一行模板到源码级的实现解析ng zorro antd ColorPicker 基本用法从 nz color picker / 一行模板到源码级的实现解析 ng zorro antdUI组件前端ng-zorro-antd 搜索框nz-input-search实战指南从基础用法到源码原理ng zorro antd 搜索框nz input search实战指南从基础用法到源码原理 nz input search 是 ng zorro antUI组件前端ng-zorro-antd FloatButton 返回顶部nz-float-button-top实战指南从最简用法到源码级原理ng zorro antd FloatButton 返回顶部nz float button top实战指南从最简用法到源码级原理 导读 本文聚焦 ng zUI组件前端上一篇终极指南探索xxHash算法的学术价值与技术演进下一篇Dagger TypeScript SDK 中的 Void 类型别名理解 GraphQL 无返回值 API 的 __Void: never 哨兵设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
Cargo Features 高级设计模式：Additive 递增原则与防止隐式互斥依赖陷阱 Cargo Features 高级设计模式：Additive 递增原则与防止隐式互斥依赖陷阱在 Rust 生态中，Cargo Features（条件编译特性） 是实现代码按需裁剪、可选依赖引入与编译加速的核心武器。
然而，很多中级开发者在设计大型 Crate… · 2026/9/27 8:42:25
万亿级数据灰度切流后的跨引擎数据资产目录（Data Catalog）标准化 万亿级数据灰度切流后的跨引擎数据资产目录（Data Catalog）标准化在万亿级大表搬迁完成、老库分库分表下线、且历史冷数据全面沉降至 ClickHouse 与 S3 深度归档池之后，整个企业的数据架构呈现出**“多存储引擎协同共生（Heterogene… · 2026/9/27 8:42:25
Woodpecker 多工作流（Workflows）完全指南：目录式流水线拆分、依赖编排与并发控制 CI/CDDevOps 【免费下载链接】woodpecker Woodpecker is a simple, yet powerful CI/CD engine with great extensibility. 项目地址： https://gitcode.com/gh_mirrors/wo/woodpecker 点击查看 免费下载 一条 Pipeline 至少包含一个 Workflow（工作流&am… · 2026/9/27 9:21:35
strands-agents Python SDK v1.30.0 版本解析：缓存、会话、工具与取消机制的实战升级 人工智能大模型AI AgentAgent 框架多智能体工具调用MCP 服务 【免费下载链接】harness-sdk Build an agent harness and control it end-to-end. Open-source SDK for production AI agents in Python & TypeScript - any model, any cloud. 项目地址： https://… · 2026/9/27 9:21:35
哪些网站可以做外链报价多少钱 做外链别瞎找：哪些网站能提权重，兼顾性能优化 网站上线三个月，后台日志里全是爬虫，真实访客却寥寥无几？别急着砸钱投广告，先检查你的外链策略。很多站长死磕 性能优化… · 2026/9/27 9:21:35
2026最新公司网站内容如何做：5个坑避开备案雷区 2026最新公司网站内容如何做：5个坑避开备案雷区 备案流程一头雾水，看着后台状态卡在“初审不通过”，心里那叫一个急。很多甲方对接人第一反应是去催服务商，但90%的情况其实是网站内容没达标，导致管局系统自动驳回。别慌，今天咱们不聊虚的，直接… · 2026/9/27 9:21:29
mini-swe-agent 在 SWE-bench 上批量运行与评估：从命令参数到源码原理的完整指南 人工智能大模型AI Agent代码智能体 【免费下载链接】mini-swe-agent The 100 line AI agent that solves GitHub issues or helps you in your command line. Radically simple, no huge configs, no giant monorepo—but scores >74% on SWE-bench verified! 项目地址&… · 2026/9/27 9:21:29
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
