前言
Pagination（分页） 是 Web 应用程序中常见的 UI 组件。而 e-ngx-pagination 是一个使用方便的 Angular 分页组件，通过它可以快速而简单的为你的数据添加分页功能，提高数据的易读性和用户体验。
安装
要使用 e-ngx-pagination，我们先需要在你的项目中安装这个 npm 包，可以通过以下命令行安装：
npm install --save e-ngx-pagination
基础用法
安装成功后，我们就可以在应用中使用 e-ngx-pagination 了。首先，我们需要在模块中引入 PaginationModule，假设我们将 e-ngx-pagination 应用在 HomeComponent中，在 HomeComponent 模块中加入：
-- -------------------- ---- -------
------ - ---------------- - ---- -------------------
-----------
-------- -
---
----------------
--
------------- - ------------- -
--
------ ----- ---------- - -接下来我们在 HomeComponent 中定义一个成员变量 data 来保存我们需要分页显示的数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- -----------------------
-----
----------------- ------------------------- ----------------------------- --------------------- -----------------------------------------------------------
-
--
------ ----- ------------- -
---------- - ---
----------- - --
-------- - ---
------- - ------------ ------- --------------- -- --- -- -- ----- --- - -----
--- ---------- -
----- ---------- - ----------------- - -- - --------------
----- -------- - ---------- - --------------
------ ------------------------------ ----------
-
------------------ -
---------------- - ------
-
-上面代码中，我们定义了我们需要分页显示的数据源 allList，totalItems 定义了总共有多少条数据，maxItems 定义了每一页最多显示多少条数据。currentPage 初始化时赋值为 1，表示当前页数，默认展示第一页的数据。
我们使用 showList 属性来输出当前页需要展示的数据，其中使用了 slice 方法和 startIndex、endIndex 来实现根据 currentPage 和 maxItems 显示的具体数据内容。
在模板中使用了 e-ngx-pagination 组件，其中：
- totalItems 表示数据源总共有多少条数据；
- currentPage 表示当前页数；
- maxItems 表示每一页最多显示的数据条数；
- pageChangeEvent 用于监听当前页数变化，当用户点击分页控件时触发。
其他参数
除了上面提到的基础使用方法，e-ngx-pagination 还提供了许多其他参数来控制分页组件的行为。
boundaryLinks
当 boundaryLinks 设置为 true 时，在分页组件的最左边和最右边（在首页与末页）显示一个链接。默认值是 false。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [boundaryLinks]="true"></e-ngx-pagination>
directionLinks
是否显示上一页和下一页按钮。 默认为 true。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [directionLinks]="false"></e-ngx-pagination>
disabled
当组件被禁用时，分页按钮排列处于灰色无法交互状态。该属性接受一个Boolean 值，默认为 false。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [disabled]="true"></e-ngx-pagination>
firstText 和 lastText
控制首页和末页链接上的文本。默认值是 First 和 Last。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [firstText]="'<<'" [lastText]="'>>'"></e-ngx-pagination>
itemsPerPageText
确定每一页中项目数量的标签字符串内容。默认值是 Items per page。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [itemsPerPageText]="'Items per page:'"></e-ngx-pagination>
maxSize
最多可显示的页码数量，当超过该值时，不再显示上一页和下一页。默认值为 0，即不限制页码数量。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [maxSize]="5"></e-ngx-pagination>
nextText 和 previousText
控制 Previous 和 Next 链接上的文本。默认值是 < 和 >。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [previousText]="'< Previous'" [nextText]="'Next >'"></e-ngx-pagination>
forceEllipses
使用省略号 ("...") 在限定的页面导航之间。默认 "control"。支持的值有："always", "never", "control"。这决定了省略号仅在 pageLinks 数量被 reducer 处理时被使用。
<e-ngx-pagination [totalItems]="totalItems" [(currentPage)]="currentPage" [maxItems]="maxItems" [forceEllipses]="'always'"></e-ngx-pagination>
总结
e-ngx-pagination 是一个简单实用的 Angular 组件，可以方便的实现前端应用中常见的分页功能。在该组件中常见可选参数参数丰富，可以满足大部分业务场景，同时也可以定制多种样式以及样式组合，适用于多种业务需求。希望这篇 e-ngx-pagination 使用教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b46c6eb7e50355dbed2