angular2分页组件

创建一个分页包 pagination，然后在里面依次创建几个文件： 
page.component.html 分页组件的标签内容 
page.conponent.ts 分页组件定义 
pagination.ts 分页组件所需配置信息的对象 

index.ts 导出分页组件

page.component.html

<!--分页组件的标签内容-->
<nav aria-label="Page navigation" style="float: right">
    <ul class="pagination">
        <li class="page-item" [ngClass]="{disabled:pagination.currentPage === 1}">
            <a class="page-link" href="javascript:void(0);" (click)="prePage()" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>
        <li class="page-item" *ngFor="let item of pageList;trackBy:index" [ngClass]="{active:item === pagination.currentPage}">
            <a class="page-link" href="javascript:void(0);" (click)="changeCurrentPage(item)">{{item}}</a>
        </li>
        <li class="page-item" [ngClass]="{disabled:pagination.currentPage === pageNum}">
            <a class="page-link" href="javascript:void(0);" (click)="nextPage()" aria-label="Next">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
    </ul>
</nav>

page.component.ts

//分页组件定义
import {Component, Input, DoCheck} from "@angular/core";

import { Pagination } from "./pagination";

@Component({
    selector: 'page',
    templateUrl: "./page.component.html"
})
export class PageComponent implements DoCheck {

    @Input()
    public pagination: Pagination;

    public pageNum: number;
    public pageList: any[];

    private oldTotalItems: number = 0;

    public changeCurrentPage(item: any): void {
        if (typeof item === 'number') {
            this.pagination.currentPage = item;
            this.pagination.changePage();
        }
    }

    public prePage(): void {
        if (this.pagination.currentPage != 1) {
            this.changeCurrentPage(this.pagination.currentPage - 1);
        }
    }
    public nextPage(): void {
        if (this.pagination.currentPage < this.pageNum) {
            this.changeCurrentPage(this.pagination.currentPage + 1);
        }
    }

    public initPageList(): void {
        //偏移量（因为要除去首页和尾页，所以要-1）
        let offset = Math.floor(this.pagination.pageLength / 2) - 1;
        //如果没有数据显示一页
        this.pagination.totalItems = this.pagination.totalItems > 0 ? this.pagination.totalItems : 1;
        //总页数
        this.pageNum = Math.ceil(this.pagination.totalItems / this.pagination.pageItems);
        this.pageList = [];
        if (this.pageNum <= this.pagination.pageLength) {
            for (let i = 1; i <= this.pageNum; i++) {
                this.pageList.push(i);
            }
        } else {
            //左边没有'...'
            if (this.pagination.currentPage < this.pagination.pageLength - offset) {
                for (let i = 1; i < this.pagination.pageLength; i++) {
                    this.pageList.push(i);
                }
                this.pageList.push('...');
                this.pageList.push(this.pageNum);
                //右边没有'...'
            } else if (this.pagination.currentPage >= this.pageNum - offset - 1) {
                this.pageList.push(1);
                this.pageList.push('...');
                for (let i = this.pagination.pageLength - 2; i >= 0; i--) {
                    this.pageList.push(this.pageNum - i);
                }
                //两边都有'...'
            } else {
                this.pageList.push(1);
                this.pageList.push('...');
                for (let i = this.pagination.currentPage - offset; i <= this.pagination.currentPage + offset; i++) {
                    this.pageList.push(i);
                }
                this.pageList.push('...');
                this.pageList.push(this.pageNum);
            }
        }
    }
    ngDoCheck(): void {
        if (this.pagination.totalItems != this.oldTotalItems) {
            this.initPageList();
            this.oldTotalItems = this.pagination.totalItems;
        }

        if (this.pagination.currentPage > this.pageNum) {
            this.pagination.currentPage = this.pageNum;
            this.pagination.changePage();
        }
    }

}

pagination.ts 

//分页组件所需配置信息的对象
export class Pagination {

    /**
     * 构造函数，同时设置属性，初始值
     * @param pageLength 显示的页码数，奇数，默认7
     * @param currentPage 当前页码数，默认1
     * @param totalItems 总条数 默认0
     * @param pageItems 每页显示条数，默认10
     * @param changePage 翻页时调用的方法
     */
    constructor(
        public pageLength: number = 7,
        public currentPage: number = 1,
        public totalItems: number = 0,
        public pageItems: number = 10,
        public changePage: () => void
    ) { }

    public static defaultPagination = new Pagination(7, 1, 0, 10, function () { });
}

index.ts

//导出分页组件
export * from './page.component';

使用：

先在app.module.ts 的declarations加入分页组件

在要使用的组件页面中加入：

<page [(pagination)]="pagination"> </page>

在对应ts中：

import { Pagination } from '../pagination/pagination';

@Output()
  public pagination: Pagination = Pagination.defaultPagination;

  ngOnInit() {
    this.initList();
    this.pagination.changePage = (() => {
      this.initList();
    });
  };

  private initList(): void {
    let url: string = 'your-url';
    let page = this.pagination.currentPage - 1;
    this.pagination.totalItems = 12;
    let head = page * this.pagination.pageItems;
    let end = head + this.pagination.pageItems - 1;
    this.routes = ROUTE.slice(head, end);
  }

changePage()函数是在使用分页组件的ts中定义的，如上述代码，page是当前页面-1，totalItem是数据总数，此例中没有与接口对接，使用了模拟数据ROUTE，是一个数组，里面有12个json对象。每页显示的数据放在this.routes中，在html中用ngfor循环展示。

有两种数据加载方式：

1、一次性取出全部数据，如上例所示，然后每次changePage时对整体数据（例子中ROUTE数组）进行分割，根据当前页面page和每页的数据数pageItems计算出分割的head和end，将该page该显示的数据放到this.routes中。

2、每次changePage都对后台发起一次请求，将page发过去，后台返回全部数据数赋给totalItem，返回该page页数据赋给this.routes。