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

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 = 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

<!--分页组件-->
<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 = [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);
 }
}

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

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

源码下载：http://xiazai./201704/yuanma/ng2-paginator-master_jb51.rar

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# angular2  # 分页组件  # angularjs  # Angular2 组件交互实例详解  # Angular2学习教程之组件中的DOM操作详解  # angular2倒计时组件使用详解  # Angular2利用组件与指令实现图片轮播组件  # Angular2入门教程之模块和组件详解  # Angular2 父子组件数据通信实例  # 详解Angular2组件之间如何通信  # Angular2 组件间通过@Input @Output通讯示例  # Angular2 组件通信的实例代码  # 浅谈angular2 组件的生命周期钩子  # Angular2实现组件交互的方法分析  # 分页  # 每页  # 条数  # 还在  # 下一页  # 上一页  # 还会  # 有多少  # 空空如也  # 如图  # 请多多  # 源码下载  # 门中  # 应该是  # 前五  # 组里  # Demo  # declarations  # component  # Page 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  高端网站建设与定制开发一站式解决方案 中企动力  zabbix利用python脚本发送报警邮件的方法  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  香港服务器建站指南：免备案优势与SEO优化技巧全解析  什么是javascript作用域_全局和局部作用域有什么区别？  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  零服务器AI建站解决方案：快速部署与云端平台低成本实践  Laravel如何实现API资源集合？（Resource Collection教程）  WordPress 子目录安装中正确处理脚本路径的完整指南  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Java解压缩zip - 解压缩多个文件或文件夹实例  详解Android——蓝牙技术 带你实现终端间数据传输  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  如何选择可靠的免备案建站服务器？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  Laravel如何使用Blade模板引擎？（完整语法和示例）  中山网站制作网页,中山新生登记系统登记流程？  如何在Windows虚拟主机上快速搭建网站？  详解vue.js组件化开发实践  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  百度浏览器如何管理插件 百度浏览器插件管理方法  高端建站三要素：定制模板、企业官网与响应式设计优化  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  如何在服务器上三步完成建站并提升流量？  Laravel如何实现一对一模型关联？（Eloquent示例）  ,交易猫的商品怎么发布到网站上去？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  原生JS获取元素集合的子元素宽度实例  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  微信小程序 HTTPS报错整理常见问题及解决方案  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  Android GridView 滑动条设置一直显示状态(推荐)  如何在阿里云ECS服务器部署织梦CMS网站？  Python结构化数据采集_字段抽取解析【教程】  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  Laravel如何使用Eloquent进行子查询  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  如何用VPS主机快速搭建个人网站？  深圳网站制作的公司有哪些,dido官方网站？  昵图网官网入口 昵图网素材平台官方入口  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】