UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文聚焦于 ng-zorro-antdAngular UI 组件库中nz-pagination分页组件的**快速跳转Quick Jumper**能力。该能力由nzShowQuickJumper属性开启允许用户输入页码后直接跳转到指定页适用于数据量大、页数多的列表场景。读完本文你将掌握快速跳转的开启方式、与禁用态/尺寸切换等特性的组合用法、输入校验与越界处理的行为细节并能从源码与测试层面理解其底层实现原理。1. 快速跳转是什么分页组件用于分隔长列表每次只加载一个页面。当页数很多时用户逐页点击效率极低此时跳转输入框是最高效的导航方式用户在输入框中键入目标页码并按下回车Enter分页器立即切换到该页。在 ng-zorro-antd 的官方演示中该场景被命名为 “跳转Jumper”对应演示文档 components/pagination/demo/jump.md快速跳转到某一页。Jump to a page directly.配套的演示组件源码位于 components/pagination/demo/jump.ts其核心用法极为简洁在nz-pagination上添加nzShowQuickJumper属性即可。2. 快速上手完整可运行示例2.1 基础用法在模块中引入NzPaginationModule导出于 components/pagination/pagination.module.ts然后在模板中书写nz-pagination [nzPageIndex]2 [nzTotal]500 nzShowQuickJumper /组件类独立组件模式直接imports引入模块import { Component } from angular/core; import { NzPaginationModule } from ng-zorro-antd/pagination; Component({ selector: nz-demo-pagination-jump, imports: [NzPaginationModule], template: nz-pagination [nzPageIndex]2 [nzTotal]500 nzShowQuickJumper / br / nz-pagination [nzPageIndex]2 [nzTotal]500 nzShowQuickJumper nzDisabled / }) export class NzDemoPaginationJumpComponent {}参数说明nzPageIndex当前页数可双向绑定默认1nzTotal数据总数本例为500按默认nzPageSize10计算共有 50 页nzShowQuickJumper布尔属性开启快速跳转输入框默认falsenzDisabled布尔属性禁用整个分页器禁用后跳转输入框同样不可输入。渲染效果分页条的最右侧出现形如 “跳至 ▢ 页” 的输入框英文环境下为 “Jump to ▢ page”文案跟随当前 i18n locale。2.2 与“每页条数切换”组合快速跳转输入框和“每页条数”Size Changer选择器同属于分页器的“选项区”。两者可以同时开启nz-pagination [nzTotal]500 nzShowQuickJumper nzShowSizeChanger [nzPageSizeOptions][10, 20, 30, 40] /3. API 与全局配置3.1 属性定义nzShowQuickJumper在官方 API 文档components/pagination/doc/index.zh-CN.md / index.en-US.md中的定义如下参数说明类型默认值全局配置[nzShowQuickJumper]是否可以快速跳转至某页booleanfalse✅其中“全局配置 ✅”意味着该属性支持通过NzConfigService进行全局统一配置无需在每个组件上重复书写。3.2 全局配置示例借助 ng-zorro-antd 的全局配置机制可以在应用根组件或AppInitializer中统一开启所有分页器的快速跳转import { NzConfigService } from ng-zorro-antd/core/config; export class AppComponent { constructor(private nzConfigService: NzConfigService) { this.nzConfigService.set(pagination, { nzShowQuickJumper: true }); } }配置键名pagination与源码中声明的模块常量一致见 components/pagination/pagination.component.ts 中的NZ_CONFIG_MODULE_NAME: NzConfigKey pagination属性上的WithConfig()装饰器使其优先读取全局配置组件级属性赋值仍可覆盖全局值。4. 交互流程与边界行为4.1 输入与触发跳转输入框由NzPaginationOptionsComponent渲染components/pagination/pagination-options.component.ts模板片段如下if (showQuickJumper) { div classant-pagination-options-quick-jumper {{ locale.jump_to }} input [disabled]disabled (keydown.enter)jumpToPageViaInput($event) / {{ locale.page }} /div }交互流程为用户键入数字 → 按回车 → 触发jumpToPageViaInput→ 组件发出pageIndexChange事件。对应的事件处理器jumpToPageViaInput($event: Event): void { const target $event.target as HTMLInputElement; const index Math.floor(toNumber(target.value, this.pageIndex)); this.pageIndexChange.next(index); target.value ; }要点只响应回车键通过(keydown.enter)绑定输入过程中不会实时跳页非数字输入安全降级toNumber来自ng-zorro-antd/core/util对无法解析的输入回退为当前页pageIndex即输入abc等非法内容回车后停留在当前页不会报错小数向下取整输入5.9会按Math.floor处理后跳转到第5页输入框自动清空跳转成功后target.value 被重置便于下一次输入。4.2 越界与非法输入的处理跳转事件最终汇入 components/pagination/pagination.component.ts 的onPageIndexChangeonPageIndexChange(index: number): void { const lastIndex this.getLastIndex(this.nzTotal, this.nzPageSize); const validIndex this.validatePageIndex(index, lastIndex); if (validIndex ! this.nzPageIndex !this.nzDisabled) { this.nzPageIndex validIndex; this.nzPageIndexChange.emit(this.nzPageIndex); } }其中getLastIndex计算末页索引Math.ceil(total / pageSize)至少为 1validatePageIndex对输入值进行钳制validatePageIndex(value: number, lastIndex: number): number { if (value lastIndex) { return lastIndex; // 超出最大页数时回落到最后一页 } else if (value 1) { return 1; // 小于 1 时回落到第 1 页 } else { return value; } }因此在总数为 500、每页 10 条共 50 页的示例中输入值实际跳转结果说明5第 5 页正常跳转100第 50 页超过最大页数钳制到最后一页0/-1第 1 页非法下限钳制到第一页abc停留在当前页解析失败回退当前页5.9第 5 页向下取整另外onPageIndexChange中还包含两层防御重复值不触发validIndex ! this.nzPageIndex保证跳转到当前页不会重复发出事件禁用态完全屏蔽!this.nzDisabled条件确保nzDisabled为真时任何跳转请求都不会生效同时输入框本身的[disabled]绑定也会阻止输入。4.3 简单的跳转输入框联动页码同步NzPaginationOptionsComponent通过pageIndexChange事件把跳转请求上抛给NzPaginationDefaultComponentcomponents/pagination/pagination-default.component.ts再转发到NzPaginationComponent统一处理最终同时更新内部nzPageIndex并触发(nzPageIndexChange)输出实现双向绑定同步。5. 文案与 RTL 支持跳转框的前后缀文案“跳至”“页” / “Jump to”“page”取自 i18n 的Paginationlocale 数据NzPaginationI18nInterface随 components/i18n 语言包自动切换无需硬编码。切换语言后NzPaginationComponent会订阅i18n.localeChange自动刷新界面文案。同时在 RTL从右到左布局下分页器根节点会自动挂载ant-pagination-rtl样式类见 components/pagination/pagination.component.ts 的 host 绑定跳转输入框的视觉顺序与图标方向随之镜像调整无需额外处理。6. 源码级验证测试用例剖析官方测试 components/pagination/pagination.spec.ts 中针对快速跳转编写了完整的用例should showQuickJumper work与上文行为一一对应渲染出input元素输入5后派发keydownEnter 事件pageIndexChange被调用一次当前页变为 5且输入框值被清空为空字符串再次回车不重复触发因为已跳转到当前页输入非法值abc、负值-1、越界值10后均不会触发跳转pageIndexChange调用次数保持不变从测试层面证实了“非法输入安全降级 越界钳制”的实现细节。此外should nzDisabled work用例验证了nzDisabled时根元素挂载ant-pagination-disabled样式类simple mode用例则验证了简单模式nzSimple下输入框直接以“当前页/总页数”形式呈现、回车同样生效的分支行为。7. 与其他特性的协作要点特性与快速跳转的关系nzShowSizeChanger两者共用选项区可同时开启互不冲突改变每页条数会重新计算末页索引跳转钳制随之生效nzSizesmall缩小整体尺寸挂载ant-pagination-mini跳转输入框尺寸同步缩小nzSimple简单模式下输入框形态不同显示 “当前页/总页数”回车同样触发跳转但不会显示独立的 Quick Jumper 输入框nzResponsive屏幕较窄xs断点时自动切换为small尺寸不影响跳转功能nzDisabled禁用后输入框不可编辑且组件内部逻辑完全屏蔽跳转事件nzHideOnSinglePage仅一页时隐藏整个分页器含跳转框8. 最佳实践建议页数较多时再开启数据量小总页数少于 10 页时逐页点击即可开启跳转框反而占用横向空间配合双向绑定使用通过[(nzPageIndex)]双向绑定当前页跳转后页面数据自然联动刷新利用全局配置统一管理若全站分页均需跳转能力优先使用NzConfigService.set(pagination, { nzShowQuickJumper: true })避免逐组件重复声明注意越界体验输入超出范围的页码会被静默钳制到首尾页而非报错若需要显式提示可在(nzPageIndexChange)回调中自行判断并给出反馈。参考路径汇总演示文档components/pagination/demo/jump.md、components/pagination/demo/jump.ts官方 APIcomponents/pagination/doc/index.zh-CN.md、components/pagination/doc/index.en-US.md核心实现components/pagination/pagination.component.ts、components/pagination/pagination-options.component.ts、components/pagination/pagination-default.component.ts类型定义components/pagination/pagination.types.ts测试用例components/pagination/pagination.spec.ts赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Pagination 基础用法从 nz-pagination 快速上手到源码级实现解析ng zorro antd Pagination 基础用法从 nz pagination 快速上手到源码级实现解析 分页器Pagination是长列表数UI组件前端SymPy 张量索引方法Indexed 表达式完全解析get_indices 与 get_contraction_structure 实战指南SymPy 张量索引方法Indexed 表达式完全解析get_indices 与 get_contraction_structure 实战指南 sympyUI组件前端塞尔达传说存档管理器如何实现WiiU与Switch存档的无缝互转塞尔达传说存档管理器如何实现WiiU与Switch存档的无缝互转 BotW Save Manager是一个专门为《塞尔达传说旷野之息》玩家设计的跨平台存档转UI组件前端上一篇C协程革命深入理解cppcoro库的完整指南下一篇ZenML项目中的密钥管理机制深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
AlgoNote 数组基础详解：线性表顺序存储、随机访问寻址与增删改查实战 教程文档知识库 【免费下载链接】AlgoNote ⛽️「算法通关手册」：从零开始的「算法与数据结构」学习教程，200 道「算法面试热门题目」，1000 道「LeetCode 题目解析」，持续更新中！ 项目地址： https://gitcod… · 2026/9/27 7:39:19
开题报告技术路线图节点经常断层？本科用智一刻避开4个误区 在开题答辩中，评审老师最喜欢看、也最容易挑出毛病的就是那张占据半页纸的“技术路线图”。
不少同学为了显得工作量饱满，用绘图软件画了密密麻麻几十个文本框，箭头横飞四处交叉。结果投影仪一放，导师直接批评：“你这… · 2026/9/27 7:39:19
open-slide 设计工程实战：基于 Emil Kowalski 动画决策框架打磨幻灯片细节体验 【免费下载链接】open-slide A slide framework built for agents. 项目地址： https://gitcode.com/gh_mirrors/op/open-slide 点击查看 免费下载 open-slide 是一款为 Agent 而生的幻灯片框架，它把"演示体验"本身当作一等公民：页… · 2026/9/27 8:24:17
2026最新解析：旅游网站建设属于什么以及学科，解决没人访问难题 2026最新解析：旅游网站建设属于什么以及学科，解决没人访问难题 网站上线三个月，后台流量曲线几乎是一条死线，每天个位数的IP，连蜘蛛抓取记录都寥寥无几。这种“网站做好了没人访问”的绝望感，是无数旅游企业建站后最真实的痛点。很多人误以为只要… · 2026/9/27 8:24:17
F2 玫瑰图（南丁格尔玫瑰图）开发指南：用极坐标半径表达数据大小 数据可视化前端 【免费下载链接】F2 📱📈An elegant, interactive and flexible charting library for mobile. 项目地址： https://gitcode.com/gh_mirrors/f2/F2 点击查看 免费下载 导读
玫瑰图（Rose Chart）&#x… · 2026/9/27 8:24:11
电脑虚拟主机避坑指南：5个关键注意事项教你省下30%预算 电脑虚拟主机避坑指南：5个关键注意事项教你省下30%预算 找建站公司怕被坑高价？别急，先看看你选的电脑虚拟主机是否踩了这些坑。很多站长花了大价钱，网站却卡得像PPT，核心问题往往出在虚拟主机的 注意事项… · 2026/9/27 8:24:05
如何攻击Wordpress站点常见报错与解决 5个WordPress安全陷阱与防御注意事项 改个需求建站公司拖一周，这种憋屈感谁懂？刚上线的WordPress站点，后台改个按钮颜色，外包团队说“底层逻辑冲突”，得排期。结果第二天网站直接变白屏，或者更糟——被黑客植入了恶意代码，SEO收… · 2026/9/27 8:23:47
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
