简介
ngc-pagination 是一个基于 Angular 的分页组件，适用于需要分页功能的前端项目。它提供了简便易用的 API 和丰富的配置选项，可以让开发者轻松地添加分页功能到他们的应用中。
安装
通过 npm 安装 ngc-pagination：
npm install ngc-pagination --save
使用
在需要使用 ngc-pagination 的模块中引入并声明它：
import { NgModule } from '@angular/core';
import { NgcPaginationModule } from 'ngc-pagination';
@NgModule({
imports: [NgcPaginationModule],
// ...
})
export class MyModule {}然后在需要使用分页的组件中添加 ngc-pagination 组件：
<ngc-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [itemsPerPage]="itemsPerPage"></ngc-pagination>
totalItems 属性表示总共有多少项需要分页，currentPage 是绑定到当前页码的变量，itemsPerPage 则表示每页显示多少项。
当用户点击页码按钮，或者输入页码按下回车键时，currentPage 变量会自动更新。你可以在组件中监听这个变量的变化，以实现分页显示：
-- -------------------- ---- -------
------------
-- ---
--
------ ----- ----------- ---------- ------ -
-- ---
------------ ------ - --
------------- ------ - ---
---------- -
--------------------
-
-------------- -
-- ---------- ----------- - ------------ -----
-
-注意，currentPage 和 itemsPerPage 必须在组件中进行初始化。否则组件会在首次渲染时抛出异常。
自定义样式
ngc-pagination 会根据 Bootstrap 的样式来渲染页面，但是你也可以自定义样式。只需要在全局 CSS 文件中添加对应的样式即可：
-- -------------------- ---- ------- --------------- - -- ------ - --------- - -- ------ - ------------------ - -- --------- - ---------------- - -- -------- - --------------- -------------- - -- ----------- -
高级用法
ngc-pagination 提供了丰富的配置选项，可以满足各种场景需求。以下是一些常用的选项：
boundaryLinks 和 directionLinks
这两个属性控制是否显示边界按钮和上下页按钮，默认都为 true。
<ngc-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [itemsPerPage]="itemsPerPage" [boundaryLinks]="false" [directionLinks]="false"></ngc-pagination>
previousLabel 和 nextLabel
这两个属性控制上一页和下一页按钮上的文本。
<ngc-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [itemsPerPage]="itemsPerPage" [previousLabel]="'«'" [nextLabel]="'»'"></ngc-pagination>
maxSize
这个属性控制分页按钮最多显示多少个，如果超过了则省略部分按钮。
<ngc-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [itemsPerPage]="itemsPerPage" [maxSize]="7"></ngc-pagination>
总结
ngc-pagination 是一个方便易用的分页组件，它可以很快地帮助你添加分页功能到你的应用中。如果你需要自定义样式或者更丰富的配置选项，ngc-pagination 也可以满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ff81e8991b448e0d2e