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：

　　第三步：注入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/。

巴特西

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