UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载本文以 ngx-bootstrap 官方用例规格 pagination.examples.basic.use-case.md 为骨架完整拆解 Pagination 组件基础示例Basic的用户场景、默认行为与底层源码实现。读者读完可以掌握pagination组件的三行最小用法、激活页与上一页/下一页按钮禁用状态的判定规则以及这些行为在 pagination.component.ts 与 pagination.component.html 中是如何落地的并了解对应单元测试的验证方式。场景概述Basic 示例要演示什么该用例规格定义了一个非常聚焦的目标向用户展示 Pagination 组件的基础分页功能。它的参与角色与范围如下Primary Actor主要参与者User用户Scope范围Ngx-bootstrap DEMO兼容 Bootstrap 版本 3 与 4Goal目标向用户展示基本的分页basic pagination功能整个场景围绕打开演示页 → 进入 Basic 子菜单 → 在不同页码间来回切换展开重点验证三件事哪一页处于 active激活状态、上一页/下一页按钮何时禁用、以及页面切换后状态如何迁移。主成功场景用户与分页组件的完整交互路径用例规格的 Main success scenario 描述了一条连贯的操作链路这正是 Basic 示例被设计出来的初衷用户打开 Pagination 演示页面用户点击 Basic 子菜单默认情况下第 1 页处于激活状态且 Previous上一页按钮为禁用状态用户点击第 3 页后Next下一页按钮变为禁用Previous 按钮变为可用第 1 页取消激活第 3 页变为激活用户再点击第 2 页后Previous 与 Next 按钮均可用第 2 页激活其余页均不激活。该规格还包含一条 Variations变体路径用户可能不是通过点击子菜单而是直接滚动scroll到 Basic 示例区块再开始操作交互结果与主场景一致。需要说明的是用例规格中假设演示数据可以翻出 3 页这一假设与 demo 实际配置完全吻合Basic 示例设置totalItems 30而分页组件默认itemsPerPage 1030 条数据恰好分成 3 页见下文最小可运行示例与页数计算小节。最小可运行示例Basic 示例的真实代码Basic 示例在文档站中的实现位于 libs/doc-pages/pagination/src/lib/demos/basic/ 目录组件定义与模板各只有几行组件类 basic.tsimport { Component } from angular/core; Component({ // eslint-disable-next-line angular-eslint/component-selector selector: demo-pagination-basic, templateUrl: ./basic.html, standalone: false }) export class DemoPaginationBasicComponent {}模板 basic.htmlpagination [totalItems]30/pagination也就是说只需一个属性绑定就能获得一个可交互的完整分页条totalItems传入总数据条数 30其余全部走默认配置。该示例组件被注册进文档站的演示列表 pagination-section.list.ts同时出现在 Overview 与 Examples 两个分区的 Basic 条目中anchor 分别为basic与basic-ex。在自己项目中复用时可以通过两种方式引入分页模块见 usage.md// Standalone 组件用法 import { PaginationModule } from ngx-bootstrap/pagination; Component({ standalone: true, imports: [PaginationModule, ...] }) export class AppComponent {}// 传统 NgModule 用法 import { PaginationModule } from ngx-bootstrap/pagination; NgModule({ imports: [PaginationModule, ...] }) export class AppModule {}PaginationModule 内部同时导出PaginationComponent与PagerComponent因此上述引入即可同时使用pagination和pager两个组件。默认行为背后的源码实现Basic 场景中第 1 页激活、Previous 禁用以及点到最后、Next 禁用都不是魔法而是由 pagination.component.ts 中的几个核心方法直接驱动的。页数计算为什么 30 条数据正好是 3 页组件的totalItemsInput与itemsPerPageInput是两个被effect监听响应式输入任一变化都会触发总页数重算pagination.component.ts。页数计算逻辑在calculateTotalPages()pagination.component.tsprotected calculateTotalPages(): number { const totalPages this.itemsPerPage 1 ? 1 : Math.ceil(this.totalItems / this.itemsPerPage); return Math.max(totalPages || 0, 1); }将 Basic 示例的数值代入Math.ceil(30 / 10) 3于是渲染出 1、2、3 三个页码。注意两个边界规则当itemsPerPage 1时所有条目会被合并到一页计算结果至少为 1保证空数据时也有一条可展示的分页条。激活页与按钮禁用判定Previous / Next 按钮是否禁用由两个方法决定pagination.component.tsnoPrevious(): boolean { return this.page 1; } noNext(): boolean { return this.page this.totalPages; }当page 1第 1 页时Previous 禁用——这正是用例规格第 3 步描述的状态当page totalPages最后一页本例为第 3 页时Next 禁用——对应规格第 4 步点击第 3 页后 Next 禁用处于中间页第 2 页时两个条件均不成立两个按钮同时可用——对应规格第 5 步。模板中的渲染逻辑位于 pagination.component.html 与 pagination.component.html方向按钮通过[class.disabled]noPrevious() || disabled()/[class.disabled]noNext() || disabled()挂上 Bootstrap 的.disabled类页码链接则通过[class.active]pg.active标记当前激活页。按钮点击统一走selectPage(page - 1, $event)/selectPage(page 1, $event)。点击翻页的核心方法selectPage()是用户每次点击页码或方向按钮时都会命中的入口pagination.component.tsselectPage(page: number, event?: Event): void { if (event) { event.preventDefault(); } if (!this.disabled()) { if (event event.target) { const target: any event.target; target.blur(); } this.writeValue(page); this.onChange(this.page); } }它做了三件事阻止a href的默认跳转、让被点击的链接失焦避免残留焦点样式、写入新页码。writeValue()进而触发page的 setterpagination.component.tssetter 中有一个值得注意的防越界逻辑this._page value this.totalPages ? this.totalPages : value || 1——即使点击超出范围的页码也不会越界会被钳制在最后一页若新旧页码不同则向外发出pageChanged事件携带{ page, itemsPerPage }。页码列表的生成渲染出的页码集合由getPages()生成pagination.component.ts默认情况下未设置maxSize或maxSize totalPages直接罗列 1 到总页数的全部页码并用makePage(num, num.toString(), num currentPage)为当前页标记active: true。当设置了maxSize且总页数超过该上限时才会进入只显示部分页码的逻辑——rotate为true时当前页居中否则按页组滚动并在组间插入...跳页链接。Basic 示例不涉及maxSize因此 3 个页码会完整展示。状态机推演第 1 页 → 第 3 页 → 第 2 页把用例规格的交互链路映射到上述源码可以得到一份精确的状态迁移表以 30 条数据、每页 10 条、共 3 页为例操作前状态用户操作操作后状态对应源码依据初始page 1无页面加载第 1 页activePrevious 禁用Next 可用noPrevious()为 truemakePage(1, 1, true)第 1 页点击第 3 页第 3 页active第 1 页取消激活Previous 可用Next 禁用page 3 totalPagesnoNext()为 true第 3 页点击第 2 页第 2 页active其余不激活Previous、Next 均可用page 2位于 1 与 3 之间两个判定均为 false这与用例规格第 3、4、5 步的预期完全一致。注意每步点击时pageChanged事件都会携带当前页号触发方便外部监听见下文常用扩展。测试如何锁定这些默认行为Basic 场景描述的行为并不是停留在文档层面的愿望清单而是有单元测试逐条锁定的。在 src/pagination/testing/pagination.component.spec.ts 中可以找到对应的验证默认值测试设置disabled true后断言渲染出 3 个liPrevious、页码 1、Next且首尾两个li都带disabled类pagination.component.spec.ts多页测试totalItems 10, itemsPerPage 4时断言总页数为 3、第 1 页激活、Previous 禁用、Next 可用pagination.component.spec.ts点击翻页测试模拟规格操作以totalItems 30, itemsPerPage 4共 8 页模拟点击第 5 页 → 第 5 页激活、Previous 变为可用与点击第 8 页 → Next 变为禁用、第 8 页激活pagination.component.spec.ts。这与用例规格点击最后一页 Next 禁用的断言模式一致。测试中还覆盖了带maxSize与boundaryLinks的点击场景pagination.component.spec.ts并验证了点击已禁用的 First 链接不会改变当前页。常用扩展从基础示例出发的进阶用法Basic 示例刻意保持最简而围绕它的更多行为可以平滑地扩展到相邻用例同目录 docs/spec/pagination/ 下还有多份 use-case 文档这里列出几个与基础交互直接相关的能力均可在 libs/doc-pages/pagination/src/lib/demos/ 下找到对应演示。双向绑定当前页与翻页事件通过[(ngModel)]双向绑定当前页码并用(pageChanged)监听翻页结果page-changed-event.htmlpagination [totalItems]66 [(ngModel)]currentPage (pageChanged)pageChanged($event)/pagination事件回调接收PageChangedEvent对象page-changed-event.tspageChanged(event: PageChangedEvent): void { this.page event.page; }组件实现了ControlValueAccessorpagination.component.ts因此天然兼容 Angular 表单模型与ngModel双向绑定。开关边界链接与方向链接boundaryLinks true时显示 First / Last 按钮默认隐藏见 boundary-links.htmldirectionLinks false时隐藏 Previous / Next 按钮默认显示见 direction-links.html。对应模板逻辑在 pagination.component.html 与 pagination.component.html 中边界与方向按钮都受各自if守卫控制且同样遵循noPrevious()/noNext()的禁用规则。整体禁用disabled true时所有分页链接不可点击disabled.html。源码中selectPage()会在this.disabled()为真时直接返回pagination.component.ts模板中非激活页也统一挂上disabled类pagination.component.html。自定义链接文本基础场景之外还可以通过previousText、nextText、firstText、lastText替换按钮文字例如 custom-links-content.html 使用lsaquo;、rsaquo;、laquo;、raquo;作为符号按钮。默认配置速查Basic 示例零配置即可工作的底气来自 PaginationConfig组件构造时若未显式传配置会调用configureOptions(paginationConfig.main)装载默认值pagination.component.ts。main配置如下main: PartialConfigModel { itemsPerPage: 10, boundaryLinks: false, directionLinks: true, firstText: First, previousText: Previous, nextText: Next, lastText: Last, pageBtnClass: , rotate: true };这与 Basic 示例的渲染结果一一对应每页 10 条所以 30 条数据分为 3 页、无 First/Last 按钮、显示 Previous/Next、按钮文字为英文默认值。完整的ConfigModel结构定义在 models/index.ts同文件还定义了PagesModel每个页链接的文本、页码与激活标记以及模板定制所需的PaginationLinkContext/PaginationNumberLinkContext上下文接口。小结通过对 pagination.examples.basic.use-case.md 的逐条拆解可以看到Basic 示例虽然只用了pagination [totalItems]30/pagination一行模板但它完整承载了分页组件的三条核心契约——当前页永远只有一个是激活的、首尾页会分别禁用 Previous/Next、任意切换都实时更新激活态。这三条契约在 pagination.component.ts 的calculateTotalPages()、noPrevious()/noNext()、selectPage()与getPages()中逐行实现并被 pagination.component.spec.ts 的点击测试逐一验证。掌握这个最小闭环再向边界链接、方向链接、禁用、页数限制等扩展用例docs/spec/pagination/ 下的其余 use-case 文档推进就能完整驾驭 ngx-bootstrap 的分页能力。赞分享UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载相关推荐ngx-bootstrap 按钮组件实战Disabled Buttons 禁用按钮示例深度解析ngx bootstrap 按钮组件实战Disabled Buttons 禁用按钮示例深度解析 本文以 ngx bootstrap 官方演示应用中的 DisaUI组件前端ngx-bootstrap Timepicker 基础示例全解析小时、分钟与 AM/PM 的默认交互行为ngx bootstrap Timepicker 基础示例全解析小时、分钟与 AM/PM 的默认交互行为 本指南以 ngx bootstrap 官方 specUI组件前端ngx-bootstrap Buttons 基础示例Basic使用场景与实现源码解析ngx bootstrap Buttons 基础示例Basic使用场景与实现源码解析 ngx bootstrap 是 Angular 生态中基于 BootsUI组件前端上一篇FanControl中文设置终极指南5步让Windows风扇控制说中文下一篇同一 Agent、两个框架在 awesome-agentic-ai-zh 中用 LangGraph 与 CrewAI 实战 search summarize 对比创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考