先来看看AngularJs中的分页实现：

angular.module('pagination', [])
.directive('pagination', function() {return {restrict: 'EA',template : '<nav>' +'<ul class="pagination">' +'<li ng-class="{disabled:conf.currentPage === 1}"><a href="javascript:void(0);" ng-click="prePage()" aria-label="Previous">' +'<span aria-hidden="true">上一页</span></a></li>' +'<li ng-repeat="item in pageList track by $index" ng-class="{active:item === conf.currentPage}">' +'<a href="javascript:void(0);" ng-click="changeCurrentPage(item)">{{item}}</a></li>' +'<li ng-class="{disabled:conf.currentPage === pageNum}"><a href="javascript:void(0);" ng-click="nextPage()" aria-label="Next">' +'<span aria-hidden="true">下一页</span></a></li>' +'</ul>' +'</nav>',replace: true,scope: {conf: '='},link: function(scope, element, attrs) {//分页显示长度（显示页码数，必须是奇数）var pageLength = 7;//改变当前页scope.changeCurrentPage = function(item){if(item == '...'){return;}else{scope.conf.currentPage = item;if(scope.conf.changePage){scope.conf.changePage();}}};//前一页scope.prePage = function(){if(scope.conf.currentPage === 1){return ;}scope.changeCurrentPage(scope.conf.currentPage - 1);};//后一页scope.nextPage = function(){if(scope.conf.currentPage === scope.pageNum){return ;}scope.changeCurrentPage(scope.conf.currentPage + 1);};//偏移量（因为要除去首页和尾页，所以要-1）var offset = parseInt(pageLength / 2) - 1;function initPageList(){//如果没有数据显示一页scope.conf.totalItems = scope.conf.totalItems > 0 ? scope.conf.totalItems : 1;//总页数scope.pageNum =  Math.ceil(scope.conf.totalItems / scope.conf.pageItems);scope.pageList = [];if(scope.pageNum <= pageLength){for (var i = 1; i <= scope.pageNum ; i++) {scope.pageList.push(i);}}else{//左边没有'...'if(scope.conf.currentPage < pageLength - offset){for (var i = 1; i < pageLength ; i++) {scope.pageList.push(i);}scope.pageList.push('...');scope.pageList.push(scope.pageNum);}else if(scope.conf.currentPage >= scope.pageNum - offset - 1){//右边没有'...'scope.pageList.push(1);scope.pageList.push('...');for (var i = pageLength - 2; i >= 0; i--) {scope.pageList.push(scope.pageNum - i);}}else{//两边都有'...'scope.pageList.push(1);scope.pageList.push('...');for(var i = scope.conf.currentPage - offset;i <= scope.conf.currentPage + offset; i++){scope.pageList.push(i);}scope.pageList.push('...');scope.pageList.push(scope.pageNum);}}};//监听数据变化，改变分页scope.$watch('conf.currentPage',initPageList);scope.$watch('conf.totalItems',function(newVal,oldVal){if(newVal !== oldVal){scope.conf.currentPage = 1initPageList();}});}};
});

定义module时引入：

angular.module('myApp', ['pagination']);

定义分页配置对象

$scope.paginationConf = {currentPage: 1,totalItems: 0,pageItems: 10,changePage: function () {$scope.queryList();//翻页时候执行的方法}};

http请求查询数据封装：

$scope.queryList = function () {var params = {page: $scope.paginationConf.currentPage - 1};$http.post("/query/queryList", $.param(params)).success(function (data) {$scope.list = data.result.list;$scope.paginationConf.totalItems = data.result.totalElements;});};

页面调用：

<pagination conf="paginationConf"></pagination>

直接参照AngularJs，来看看Angular2中分页实现：

1. 要封装组件，所以我们要创建一个分页包 pagination，然后在里面依次创建几个文件：
   page.component.html 分页组件的标签内容
   page.conponent.ts 分页组件定义
   pagination.ts 分页组件所需配置信息的对象
   index.ts 导出分页组件

2.然后看看各个文件内容

page.component.html

<nav aria-label="Page navigation" style="float: right"><ul class="pagination"><li class="page-item" [ngClass]="{disabled:pagination.currentPage === 1}"><a class="page-link" href="javascript:void(0);" (click)="prePage()" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li><li class="page-item" *ngFor="let item of pageList;trackBy:index" [ngClass]="{active:item === pagination.currentPage}"><a class="page-link" href="javascript:void(0);" (click)="changeCurrentPage(item)">{{item}}</a></li><li class="page-item" [ngClass]="{disabled:pagination.currentPage === pageNum}"><a class="page-link" href="javascript:void(0);" (click)="nextPage()" aria-label="Next"><span aria-hidden="true">下一页</span></a></li></ul>
</nav>

page.conponent.ts

import {Component, Input, DoCheck} from "@angular/core";import { Pagination } from "./pagination";@Component({selector: 'page',templateUrl: "./page.component.html"
})
export class PageComponent implements DoCheck{@Input()public pagination:Pagination;public pageNum:number;public pageList:any[];private oldTotalItems:number = 0;public changeCurrentPage(item:any): void{if(typeof item === 'number'){this.pagination.currentPage = item;this.pagination.changePage();}}public prePage():void {if(this.pagination.currentPage != 1){this.changeCurrentPage(this.pagination.currentPage - 1);}}public nextPage():void {if(this.pagination.currentPage < this.pageNum){this.changeCurrentPage(this.pagination.currentPage + 1);}}public initPageList():void {//偏移量（因为要除去首页和尾页，所以要-1）let offset = Math.floor(this.pagination.pageLength / 2) - 1;//如果没有数据显示一页this.pagination.totalItems = this.pagination.totalItems > 0 ? this.pagination.totalItems : 1;//总页数this.pageNum = Math.ceil(this.pagination.totalItems / this.pagination.pageItems);this.pageList = [];if(this.pageNum <= this.pagination.pageLength){for (let i=1;i <= this.pageNum;i++){this.pageList.push(i);}}else {//左边没有'...'if(this.pagination.currentPage < this.pagination.pageLength - offset){for(let i=1;i < this.pagination.pageLength;i++){this.pageList.push(i);}this.pageList.push('...');this.pageList.push(this.pageNum);//右边没有'...'}else if(this.pagination.currentPage >= this.pageNum - offset - 1){this.pageList.push(1);this.pageList.push('...');for(let i=this.pagination.pageLength - 2;i >= 0 ;i--){this.pageList.push(this.pageNum - i);}//两边都有'...'}else {this.pageList.push(1);this.pageList.push('...');for(let i= this.pagination.currentPage - offset;i <= this.pagination.currentPage + offset; i++){this.pageList.push(i);}this.pageList.push('...');this.pageList.push(this.pageNum);}}}ngDoCheck():void {if(this.pagination.totalItems != this.oldTotalItems){this.initPageList();this.oldTotalItems = this.pagination.totalItems;}if(this.pagination.currentPage > this.pageNum){this.pagination.currentPage = this.pageNum;this.pagination.changePage();}}}

pagination.ts

export class Pagination {/*** 构造函数，同时设置属性，初始值* @param pageLength 显示的页码数，奇数，默认7* @param currentPage 当前页码数，默认1* @param totalItems 总条数 默认0* @param pageItems 每页显示条数，默认10* @param changePage 翻页时调用的方法*/constructor(public pageLength:number = 7,public currentPage:number = 1,public totalItems:number = 0,public pageItems:number = 10,public changePage:() => void){}public static defaultPagination = new Pagination(7,1,0,10, function () {});
}

index.ts

export * from './page.component';

3.使用分页组件

• app.module.ts 的declarations加入分页组件
• 页面调用 < page [(pagination)]=”pagination” > < / page>
• 引入分页对象，并初始化配置
  @Output()
  public pagination:Pagination = Pagination.defaultPagination;

最后就在初始化调用了

  public ngOnInit() :void {this.initList();this.pagination.changePage = (() => {this.initList();});}private initList(): void {let url:string ='your-url';let page = this.pagination.currentPage - 1;this.http.get(url + "?page=" + page).toPromise().then(response => response.json()).then(page => {this.pagination.totalItems = page.totalElements;this.content = page.content;}).catch(this.handleError);}

当然可以封装到公司的私库中，或者对分页组件按照自己的需要进行进一步的封装调整，以后直接引入即可。