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