随着前端的发展，越来越多的库、框架和工具被开发出来，以便于我们更高效地开发网站和应用，其中一个非常有用的工具就是 ng4-pagination。
ng4-pagination 是一个 Angular 4 的分页组件，它可以让我们轻松地解决分页的问题，例如在数据量较大的列表展示中，我们可以通过它实现分页展示，提高用户体验。本文将详细介绍如何使用这个 npm 包。
安装
首先，我们需要在 Angular 4 的项目中安装 ng4-pagination。在命令行中进入项目目录，然后运行以下命令：
npm install ng4-pagination --save
安装完成后，在我们需要使用分页组件的组件中引入导入 ng4-pagination 模块，例如在 app.module.ts 中导入：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------- - ---- ----------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- --------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- --
使用
安装并导入 ng4-pagination 后，我们就可以在项目中使用分页组件了，在需要的组件的 HTML 文件中添加以下代码：
<ul>
<li *ngFor="let item of collection | paginate: { itemsPerPage: pageSize, currentPage: p }">{{item}}</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>其中，collection 是需要被分页的数据数组，pageSize 指定每一页显示的数量，p 是当前页数。
在组件中，我们需要声明一个数组用来存储数据，然后在 ngOnInit() 生命周期钩子函数中初始化数据，并指定每页显示数量和当前页数：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ---------- - --------- - ------------- --------- ------------ - ----------------
-----
-------------------- --------------- - ------------------------------
-
--
------ ----- ------------ -
----------- ----- - ---
-- ------ - --
--------- ------ - ---
---------- -
-- ---------------
--- ---- - - -- - -- ---- ---- -
-------------------------- -------
-
-
-这样，我们就完成了 ng4-pagination 的使用。
总结
ng4-pagination 是一个非常实用的 Angular 4 分页组件，它可以让我们轻松地解决分页的问题，提高用户体验。通过本文，我们了解了 ng4-pagination 的安装和使用，并在实际的项目中应用它。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609981e8991b448ded2e