mavi-angular-paginator 是一款基于 Angular 的分页插件，帮助开发者快速建立并使用分页功能。本文将详细介绍如何使用 mavi-angular-paginator，适用于 Angular 版本为 4.0 及以上。
安装
执行以下命令来安装 mavi-angular-paginator：
npm install --save mavi-angular-paginator
依赖
在使用 mavi-angular-paginator 前，需要首先引入以下依赖：
import { Component, OnInit } from '@angular/core';
import { MaviPaginatorModule } from 'mavi-angular-paginator';基本使用
在需要使用分页的组件中引入 MaviPaginatorModule：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ------------------- - ---- ------------------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- -------------------------------- -- ------ ----- ----------- ---------- ------ - ------------- - - ---------- - - -
在 HTML 模板中，添加以下代码来调用分页：
<mavi-paginator [pageCount]="10" [currentPage]="1" [pageLinkCount]="5" (pageChange)="onPageChange($event)"></mavi-paginator>
其中，pageCount 表示总页数，currentPage 表示当前页数，pageLinkCount 表示分页链接数量，pageChange 是分页改变事件。
编写分页改变事件回调函数：
onPageChange(paginateEvent: PaginateEvent) {
console.log(paginateEvent);
}当分页改变时，将会回调 onPageChange 函数，并打印出当前分页信息。
高级使用
若需自定义分页链接外观，可以在 HTML 模板中，添加以下代码：
-- -------------------- ---- -------
--------------- ---------------- ----------------- ------------------- ------------------------------------
------------ -------------------
---------------------
--------------
------------ --------------------
-----------------
--------------
------------ ------------- ---------
---------------------
--------------
-----------------此时，会显示自定义的左右箭头和分页链接。
结语
mavi-angular-paginator 能够帮助开发者快速使用分页功能，减少重复代码的编写。同时，它也具有高度的自定义性，可以根据实际需要进行定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005522b81e8991b448cfaa5