Angular4.+ ngx-bootstrap Pagination 自定义分页组件

Angular4 随笔（二）  ——自定义分页组件

1.简介

　　本组件主要是实现了分页组件显示功能，通过使用 ngx-bootstrap Pagination分页组件实现。

　　基本逻辑：

　　　　1.创建一个分页组件，如：ng g component  pager

　　　　2.父组件调用子组件，并向子组件传入基础配置信息

　　　　3.分页组件接收父组件传参，并在模板上进行配置，在html模板上定义点击事件，调用分页子组件自身一个方法

4.分页组件定义发射器，当页码发生变化时，发射通知

　　　　5.父组件模板调用分页组件处，监听分页组件发射方法，并调用自身组件方法，接收分页组件发射携带的数据，执行自身业务逻辑

2.准备工作

　　第一步：搭建Angular4 环境，可以参考 我的博客 《Angular环境搭建》

　　第二步：安装ngx-bootstrap插件

　　　　　　使用Bootstrap4：

　　　　　　　　打开命令窗口，在当前项目下运行指令 npm install ngx-bootstrap --save （推荐）

　　　　　　使用Bootstrap3：

　　　　　　　　<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

　　第三步：注入PaginationModule

　　　　　　在当前调用分页组件所在模块ts文件中导入 PaginationModule 模块，如下：

　　　　　　　　import { PaginationModule } from 'ngx-bootstrap/pagination';

　　　　　　并在import:[]中注入PaginationModule.forRoot()，如：

　　　　　　

   imports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule.forChild(homeRoutes),
     PaginationModule.forRoot()
   ],

3.代码讲解

　　第一步：创建分页组件

　　　　ng g component pager

　　第二步：编写分页组件模板

 <div>
     <pagination [totalItems]="totalItems"  [(ngModel)]="currentPage"  [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" (pageChanged)="pageChanged($event)"  previousText="&lsaquo;" nextText="&rsaquo;" [boundaryLinks]="true" firstText="&laquo;"  lastText="&raquo;"  style="text-align: center;position: relative;left: 40%;"></pagination>
 </div>

　　第三步：分页组件ts文件代码，如下：

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

 @Component({
   selector: 'app-pager',
   templateUrl: './pager.component.html',
   styleUrls: ['./pager.component.css']
 })
 export class PagerComponent implements OnInit {
   //存在多页，显示页码数量
   maxSize:number = 3;
   //每页展示条数
   itemsPerPage:number = 15;
   //总条数
   @Input() totalItems:number;
   //当前页码
   @Input() currentPage:number;
   //定义发射器，当页码变化时候，将变化后的数据发射出去，供监听者接收使用
   @Output() pageChanges:EventEmitter<Page> = new EventEmitter();

   pageChanged(event: any): void {
     //通过发射器发射数据，数据包含在event中
     this.pageChanges.emit(event);
   }

   constructor() {}

   ngOnInit() {
   }

 }

 export class Page{
   constructor(
     public itemsPerPage:number,
     public page:number
   ){
     this.itemsPerPage = 15;
     this.page = 1;
   }
 }

　　第四步：父组件ts文件中配置传入分页组件配置项，如：

   //分页组件配置项
   private itemsPerpage:number ;
   //总条数
   private totalcounts:number;
   //当前页码
   private currentPage:number = 1;

　　第五步：父组件htaml模板调用子组件，代码如下：

　　　　

 <div class="card-body" style="font-size:14px;">
    <table class="table table-bordered ">
        <thead>
           <tr>
              <th>序号</th>
              <th>用户名称</th>
               <th>邮箱</th>
               <th>上次登录</th>
               <th>状态</th>
               <th>操作</th>
           </tr>
         </thead>
         <tbody >
            <tr *ngFor="let user of users,let i = index;">
                <td>{{(currentPage-1)*15+i+1}}</td>
                <td>{{user.username}}</td>
                <td>{{user.email}}</td>
                <td>{{user.lastlogintime * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td><span class="badge badge-success">已启用</span></td>
                <td>
                   <a href="javascript:;" (click)="switchToCheckUser(user)">查看</a>
                   <a href="javascript:;" (click)="switchToEditUser(user)" style="margin-left:10px;">编辑</a>
                   <a href="javascript:;" (click)="deleteUser(user)" style="margin-left:10px;">删除</a>
                </td>
            </tr>
          </tbody>
      </table>
      <app-pager [totalItems]="totalcounts" [currentPage]="currentPage" (pageChanges)="pageChanged($event)"></app-pager>
 </div>

　　第六步：父组件定义监听页码变化的 pageChanged($event)方法，代码如下：

　　　　

   //页码变化，重新获取用户列表数据
   pageChanged(event){
     //查看监听到的数据
     console.log('event:',event);
     this.currentPage = event.page;
     this.itemsPerpage = event.itemsPerPage;
     //重新获取用户列表数据
     this.getUserData();
   }

4.运行截图

　　

5.备注

　　1.关于ngx-bootstrap使用，可以参考 http://ngx-bootstrap.com/。

　　2.关于分页模板使用可以参考http://ngx-bootstrap.com/。