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），仅供参考 ng-zorro-antd Pagination 基础用法：从 `＜nz-pagination＞` 快速上手到源码级实现解析
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），仅供参考