Angular2如何自定义分页组件

这篇文章主要介绍了Angular2如何自定义分页组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

西湖ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

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

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



// 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 = 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);
 }
}

分页组件源码：

page.html

1 && pageParams.totalNum>0">
 总计 {{pageParams.totalNum}} 条，第 {{pageParams.curPage}} / {{pageParams.totalPage}} 页
 <<
 上一页
 
  {{page.pageNo}}
 
 下一页
 >>