Angular2-PrimeNG 分页模块源码学习

Angular2 PrimeNG源码学习

Paginator分页组件

GITHUB地址

首先分析一下分页功能的需求：

1. 由父组件传入数据总数量，每页显示数量，可自定义初始页
2. 由父组件传入分页按钮个数
3. 有第一页，上一页，下一页，最后一页按钮
4. 可在页面选择性更改每页显示数量

HTML模板代码：
部分代码片段

第一页按钮：

 <a href="#" #firstlink class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all" 
 (mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null"
 (click)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage(),
 'ui-state-hover':(firstlink === hoveredItem && !isFirstPage())}" [tabindex]="isFirstPage() ? -1 : null">
 <span class="fa fa-step-backward"></span>
  </a>

这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量，并以此更改样式
2.点击click事件，调用changePageToFirst(event)处理

上一页，下一页，最后一页和第一页类似

分页按钮：

 <span