介绍
essence-ng2-pagination 是一个基于 Angular 2 的分页组件包。它易于使用，高度可自定义，并且内置了很多方便的特性。
安装
运行以下命令进行安装：
--- ------- ---------------------- ------
引入
首先在你的 NgModule 文件中导入 PaginationModule 模块：
------ - ---------------- - ---- -------------------------
---
-----------
-------- -
----------------
--
---
--
------ ----- -------- - -基本使用
在你的组件中，添加以下代码：
------ - --------- - ---- ----------------
------ - --------- - ---- -------------------------
---
------------
--------- -
-------
-------
----
-------------
--------------
-----
--------
-------
--- ----------- ---- -- -----------------
------ --------- -------
------ ---------- -------
-----
--------
--------
-------------------- ----------------------------------------------------------
-
--
------ ----- ----------- -
---------- ---------------
------------------- ---------- ---------- --
---------- -
--------------------------------------- -- -
-------------- - --- ---------------------
---
-
------------------- -
----------------------------------------- ------------------------------ -- -
-------------- - --- ---------------------
---
-
-自定义样式
你可以自定义分页控件的样式。在你的样式文件中添加以下代码：
----------- - -------- ----- ---------------- ------- ------------ ------- - ----------- ------------------------------------ ----------- -------------------------------- ----------- ----------------------------- - ----------- -------- ------ ------ ------- ----- ------- -------- ------- ---- -------- ---- -------------- ---- - ----------- ----------------------- - ----------- -------- ------ ------ ------- ----- ------- -------- ------- ---- -------- ---- -------------- ---- -
深度学习和扩展
essence-ng2-pagination 可以轻松地扩展和自定义。你可以继承 PagedData 类，并添加额外的逻辑，如下所示：
------ ----- ----------- ------- ----------------- - -- ------------------ -
示例代码
以下是一个完整的示例代码，包括自定义样式和数据格式化等功能：
------ - --------- - ---- ----------------
------ - --------- - ---- -------------------------
------ --------- ------ -
----- -------
------ -------
----- -----
-
------ ----- --------- -
----- -------- - -
-
----- -------
------ -------------------
----- --- ------------------
--
-
----- -------
------ -------------------
----- --- ------------------
-
-- ---
--
------------ - -- -------- - --- -
----- ---------- - ----- - -- - ---------
----- -------- - ---------- - ---------
----- --------- - --------------------------- ----------
------ --------------
-
-
------------
--------- ---------------
--------- -
-------
-------
----
-------------
--------------
-------------
-----
--------
-------
--- ----------- ---- -- -----------------
------ --------- -------
------ ---------- -------
------ --------- - ---- -------
-----
--------
--------
-------------------- ----------------------------------------------------------
--
------- --
----------- -
-------- -----
---------------- -------
------------ -------
-
----------- ------------------------------------
----------- --------------------------------
----------- ----------------------------- -
----------- --------
------ ------
------- -----
------- --------
------- ----
-------- ----
-------------- ----
-
----------- ----------------------- -
----------- --------
------ ------
------- -----
------- --------
------- ----
-------- ----
-------------- ----
-
--
--
------ ----- ----------- ---------- ------ -
---------- ------------------
------------------- ---------- ---------- --
---------- -
--------------------------------------- -- -
-------------- - --- ------------------------
---
-
------------------- -
----------------------------------------- ------------------------------ -- -
-------------- - --- ------------------------
---
-
-结论
essence-ng2-pagination 是一个非常实用且易于使用的分页组件包。它具有很高的可定制性，并且可以很容易地扩展和自定义。如果你需要一个高度自定义的分页组件，那么它绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e281e8991b448e06ab