介绍
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