Angular2自定义分页组件

在项目中，前端传给后台的参数有：

pageSize：每页的条数

pageNo：当前页码

比如当前是第1页，每页20条，则后台返回第1页的20条记录（sql应该是用limit去获取分页数据）

同时，后台接口还会返回列表的总条数totalNum，前端根据totaNum/pageSize计算总共有多少页

如图：

注意事项：

需要先配置好路由（Angular2路由与导航）

使用步骤：

（1）在项目中引入分页组件

// 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 {
}
           

（2）在页面中使用分页组件：

// demo.html
<!--分页组件参数：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参数
  public totalNum = ; // 总数据条数
  public pageSize = ;// 每页数据条数
  public totalPage = ;// 总页数
  public curPage = ;// 当前页码
  constructor(location:Location) {
    let vm = this;
    if (vm.params) {
      vm.params = vm.params.replace('?', '').split('&');
      let theRequest = [];
      for (let i = ; i < vm.params.length; i++) {
        theRequest[vm.params[i].split("=")[]] = vm.params[i].split("=")[] == 'pageNo' ? parseInt(vm.params[i].split("=")[]) : vm.params[i].split("=")[];
      }
      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);
  }
}
           

分页组件源码：

page.html

<!--分页组件-->
<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>

           

page.ts

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 = [, , , , ];
  public totalPage = ;

  constructor() {
    let vm = this;
    //console.log('从父组件获取的参数', vm['pageParams']);

  }

  getPageList(pageParams) {
    /*分页设置*/
    let pageList=[];
    if (pageParams.totalPage <= ) {//如果总的页码数小于5（前五页），那么直接放进数组里显示
      for (let i = ; i < pageParams.totalPage; i++) {
        pageList.push({
          pageNo: i + 
        });
      }
    } else if (pageParams.totalPage - pageParams.curPage <  && pageParams.curPage > ) {//如果总的页码数减去当前页码数小于5（到达最后5页），那么直接计算出来显示
      pageList = [
        {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage
        }
      ];
    } else {//在中间的页码数
      let cur = Math.floor((pageParams.curPage - ) / ) *  + ;
      pageList = [
        {
          pageNo: cur
        }, {
          pageNo: cur + 
        }, {
          pageNo: cur + 
        }, {
          pageNo: cur + 
        }, {
          pageNo: cur + 
        },
      ];
    }
    return pageList;
  }


  changePage(pageNo) {
    let vm = this;
    //console.log('修改页码', pageNo);
    vm.pageParams.curPage = pageNo;
    vm.changeCurPage.emit(vm.pageParams.curPage);
  }
}
           

ng2还在入门中，组件有待完善，请多多指教

项目demo：https://github.com/youzouzou/ng2-paginator