// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { RouterModule }  from '@angular/router';
import { Demo }  from './demo/demo';
import { Page }  from './page/page';
@NgModule({
 declarations: [
  AppComponent,
  Demo,
  Page
 ],
 imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot([
   {
    path: 'demo',
    component: Demo
   }
  ]),
  HttpModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {
}

// demo.html
<!--分頁組件參數(shù)：pageSize,totalNum,curPage,totalPage-->
<page-template [pageParams]="{pageSize:20,totalNum:100,curPage:1,totalPage:5}" (changeCurPage)="getPageData($event)"></page-template>

// demo.ts
import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
 selector: 'demo',
 templateUrl: './demo.html'
})
export class Demo {
 public params; // 保存頁面url參數(shù)
 public totalNum = 0; // 總數(shù)據(jù)條數(shù)
 public pageSize = 20;// 每頁數(shù)據(jù)條數(shù)
 public totalPage = 0;// 總頁數(shù)
 public curPage = 1;// 當(dāng)前頁碼
 constructor(location:Location) {
  let vm = this;
  if (vm.params) {
   vm.params = vm.params.replace('?', '').split('&');
   let theRequest = [];
   for (let i = 0; i < vm.params.length; i++) {
    theRequest[vm.params[i].split("=")[0]] = vm.params[i].split("=")[0] == 'pageNo' ? parseInt(vm.params[i].split("=")[1]) : vm.params[i].split("=")[1];
   }
   vm.params = theRequest;
   if (vm.params['pageNo']) {
    vm.curPage = vm.params['pageNo'];
    //console.log('當(dāng)前頁面', vm.curPage);
   }
  } else {
   vm.params = {};
  }
 }
 getPageData(pageNo) {
  let vm = this;
  vm.curPage = pageNo;
  console.log('觸發(fā)', pageNo);
 }
}

<!--分頁組件-->
<div class="col-md-12 text-right margin-bottom" *ngIf="pageParams.totalPage>1 && pageParams.totalNum>0">
 <a class="pull-left text-sm">總計 {{pageParams.totalNum}} 條，第 {{pageParams.curPage}} / {{pageParams.totalPage}} 頁</a>
 <button class="btn btn-default previous" [routerLink]="['./']" [disabled]="pageParams.curPage<=5"
     (click)="changePage(pageParams.curPage-5)" [queryParams]="{pageNo:pageParams.curPage-5}"><<</button>
 <button class="btn btn-default next" [routerLink]="['./']" (click)="changePage(pageParams.curPage-1)"
     [queryParams]="{pageNo:pageParams.curPage-1}" [disabled]="pageParams.curPage==1">上一頁</button>
 <button class="btn btn-default" [routerLink]="['./']" [disabled]="pageParams.curPage==page.pageNo"
     (click)="changePage(page.pageNo)" [queryParams]="page" *ngFor="let page of getPageList(pageParams)">
  {{page.pageNo}}
 </button>
 <button class="btn btn-default next" [routerLink]="['./']" (click)="changePage(pageParams.curPage-(-1))"
     [queryParams]="{pageNo:pageParams.curPage-(-1)}" [disabled]="pageParams.curPage==pageParams.totalPage">下一頁</button>
 <button class="btn btn-default previous" [routerLink]="['./']" [disabled]="pageParams.totalPage-pageParams.curPage<=5"
     (click)="changePage(pageParams.curPage-(-5))" [queryParams]="{pageNo:pageParams.curPage-(-5)}">>></button>
</div>
<div class="col-md-12 text-center text-sm text-dark-gray" *ngIf="!pageParams.totalNum">
 空空如也
</div>

import { Component,Input, Output,EventEmitter } from '@angular/core';
@Component({
 selector: 'page',
 templateUrl: './page.html'
})

export class Page {
 @Input('pageParams') pageParams;// 父組件向子組件傳值
 @Output() changeCurPage:EventEmitter<Number> = new EventEmitter;// 子組件向父組件廣播事件，觸發(fā)改變當(dāng)前頁面的事件

 public pageList = [1, 2, 3, 4, 5];
 public totalPage = 5;

 constructor() {
  let vm = this;
  //console.log('從父組件獲取的參數(shù)', vm['pageParams']);

 }

 getPageList(pageParams) {
  /*分頁設(shè)置*/
  let pageList=[];
  if (pageParams.totalPage <= 5) {//如果總的頁碼數(shù)小于5（前五頁），那么直接放進數(shù)組里顯示
   for (let i = 0; i < pageParams.totalPage; i++) {
    pageList.push({
     pageNo: i + 1
    });
   }
  } else if (pageParams.totalPage - pageParams.curPage < 5 && pageParams.curPage > 4) {//如果總的頁碼數(shù)減去當(dāng)前頁碼數(shù)小于5（到達最后5頁），那么直接計算出來顯示
   pageList = [
    {
     pageNo: pageParams.curPage - 4
    }, {
     pageNo: pageParams.curPage - 3
    }, {
     pageNo: pageParams.curPage - 2
    }, {
     pageNo: pageParams.curPage - 1
    }, {
     pageNo: pageParams.curPage
    }
   ];
  } else {//在中間的頁碼數(shù)
   let cur = Math.floor((pageParams.curPage - 1) / 5) * 5 + 1;
   pageList = [
    {
     pageNo: cur
    }, {
     pageNo: cur + 1
    }, {
     pageNo: cur + 2
    }, {
     pageNo: cur + 3
    }, {
     pageNo: cur + 4
    },
   ];
  }
  return pageList;
 }
 changePage(pageNo) {
  let vm = this;
  //console.log('修改頁碼', pageNo);
  vm.pageParams.curPage = pageNo;
  vm.changeCurPage.emit(vm.pageParams.curPage);
 }
}