// app.module.tsimport {
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<!--分页组件参数：pageSize,totalNum,curPage,totalPage--><page-template [pageParams]="{
pageSize:20,totalNum:100,curPage:1,totalPage:5}
" (changeCurPage)="getPageData($event)"></page-template>// demo.tsimport {
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参数 public totalNum = 0;
// 总数据条数 public pageSize = 20;
// 每页数据条数 public totalPage = 0;
// 总页数 public curPage = 1;
// 当前页码 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('当前页面', vm.curPage);
}
}
else {
vm.params = {
}
;
}
}
getPageData(pageNo) {
let vm = this;
vm.curPage = pageNo;
console.log('触发', 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;
// 子组件向父组件广播事件，触发改变当前页面的事件 public pageList = [1, 2, 3, 4, 5];
public totalPage = 5;
constructor() {
let vm = this;
//console.log('从父组件获取的参数', vm['pageParams']);
}
getPageList(pageParams) {
/*分页设置*/ let pageList=[];
if (pageParams.totalPage <= 5) {
//如果总的页码数小于5（前五页），那么直接放进数组里显示 for (let i = 0;
i < pageParams.totalPage;
i++) {
pageList.push({
pageNo: i + 1 }
);
}
}
else if (pageParams.totalPage - pageParams.curPage < 5 && pageParams.curPage > 4) {
//如果总的页码数减去当前页码数小于5（到达最后5页），那么直接计算出来显示 pageList = [ {
pageNo: pageParams.curPage - 4 }
, {
pageNo: pageParams.curPage - 3 }
, {
pageNo: pageParams.curPage - 2 }
, {
pageNo: pageParams.curPage - 1 }
, {
pageNo: pageParams.curPage }
];
}
else {
//在中间的页码数 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);
}
}