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/。