介绍
angular4-pagination 是一个基于 Angular 4 开发的分页组件，可以方便地实现对数据进行分页展示。不需要额外安装 jQuery 等第三方库，只需在 Angular 4 项目中安装和引用即可。
安装
使用 npm 安装：
npm install angular4-pagination --save
使用
- 在 Angular 4 组件中引入 angular4-pagination：
import { PaginationModule } from 'angular4-pagination';- 在组件的 NgModule 中添加 PaginationModule 到 imports 中：
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, PaginationModule],
bootstrap: [AppComponent]
})
export class AppModule { }- 在组件模板中使用 ng4-pagination 组件：
<ng4-pagination [pageSize]="10" [total]="totalItems" [(currentPage)]="currentPage" [maxSize]="maxSize"></ng4-pagination>
参数说明
| 参数名称 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| pageSize | number | 10 | 每页显示条目数 |
| total | number | 0 | 总条目数 |
| currentPage | number | 1 | 当前页码数 |
| maxSize | number | 5 | 最多显示的页码数 |
示例
下面是一个基于 Angular 4 开发的分页组件的示例代码：
- 在组件中声明变量和方法：
-- -------------------- ---- -------
------ ----- ------------ -
---------- - ---
----------- - --
------- - --
------------------ -
-------------------- ----- -- -----
-
-- 在组件模板中使用 ng4-pagination：
<ng4-pagination [pageSize]="10" [total]="totalItems" [(currentPage)]="currentPage" [maxSize]="maxSize" (pageChanged)="onPageChanged($event)"></ng4-pagination>
总结
angular4-pagination 是一个功能强大、易于使用的 Angular 4 分页组件，使用时只需引用并配置相应参数即可实现快速的分页功能。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a281e8991b448dee1c