前言

• 分页组件是非常常用的一个功能,所以需要封装成一个公共组件,方便调用

效果演示

ionic2实战-自定义分页组件.gif

核心代码

• paging.html完整代码

<ion-grid text-center *ngIf="total>pageSize">
  <ion-row>
    <ion-col no-padding>
      <button ion-button  small [color]="color" [disabled]="pageNum==1" (click)="btnClick(1)">首页</button>
      <button ion-button  small [color]="color" [disabled]="pageNum==1" (click)="btnClick(pageNum-1)">上一页
      </button>
      <button ion-button  small [color]="color" [disabled]="pageNum==ceil(total/pageSize)"
              (click)="btnClick(pageNum+1)">下一页
      </button>
      <button ion-button  small [color]="color" [disabled]="pageNum==ceil(total/pageSize)"
              (click)="btnClick(ceil(total/pageSize))">尾页
      </button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col no-padding style="font-size: 12px">
      每页显示{{pageSize}}条数据，共{{total}}条，当前为第{{pageNum}}页，共{{ceil(total/pageSize)}}页
    </ion-col>
  </ion-row>
</ion-grid>

• paging.ts完整代码

import {Component, Input, Output, EventEmitter} from '@angular/core';
import { IonicPage} from 'ionic-angular';
import {PAGE_SIZE} from "../../providers/Constants";

/**
 * @name 自定义分页组件
 * @description
 * @example <page-paging [total]="18" (pageNumChange)="doSearch($event)"></page-paging>
 * @example <page-paging [total]="total" (pageNumChange)="doSearch($event)" pageSize="10" color="dark"></page-paging>
 */
@IonicPage()
@Component({
  selector: 'page-paging',
  templateUrl: 'paging.html',
})
export class PagingPage {

  @Input()
  total:number;//共多少条数据

  @Input()
  pageSize:number=PAGE_SIZE;//每页大小,默认5条

  @Input()
  color:string='primary';//主题颜色

  @Input() pageNum:number=1;//当前第几页,默认1
  @Output() pageNumChange = new EventEmitter<any>();


  constructor() {
  }

  btnClick(pageNum){
    this.pageNum = pageNum;
    this.pageNumChange.emit(pageNum);
  }

  ceil(num){
    return Math.ceil(num);
  }

}

• paging.module.ts完整代码

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PagingPage } from './paging';

@NgModule({
  declarations: [
    PagingPage,
  ],
  imports: [
    IonicPageModule.forChild(PagingPage),
  ],
  exports: [
    PagingPage
  ]
})
export class PagingPageModule {}

使用

• 在需要用的模块中导入PagingPageModule
  

• 在.html上

<page-paging [total]="18" (pageNumChange)="doSearch($event)"></page-paging>

• 在.ts上

 doSearch(pageNumber){
    console.log(pageNumber);
  }

最后

• 觉得样式丑的请自行修改pagination.html
• 此文也展示了Angular自定义组件最常用的@Input()和 @Output()的用法,希望大家能举一反三写出更强大的组件
• 更完整代码在github