ng2-pagination模块插件 如何实现跳转页

Question

<ul>
<li style="cursor: pointer" *ngFor="let item of info | paginate: { itemsPerPage: 2, currentPage: p }">{{item.name}}</li>
</ul>
<pagination-controls previousLabel="上一页" nextLabel="下一页" (pageChange)="p = $event">

</pagination-controls>

Answer 1

分页组件建议还是自己写，样式可控，可以做到和网页的整体样式匹配。
下面是我们自己写的分页代码，可供参考，注意，我们内部数据处理的逻辑是分页从0开始。

html

<ul class="pagination">
    <li>
        <a (click)="changePage(0)">首页</a>
    </li>
    <li [class.disabled]="currentPage < 1">
        <a (click)="goPrevious(currentPage)">上一页</a>
    </li>
    <li class="disabled" *ngIf="currentPage > 3">
        <a>...</a>
    </li>
    <li *ngIf="currentPage >= 3">
        <a (click)="changePage(currentPage-3)">{{currentPage-2}}</a>
    </li>
    <li *ngIf="currentPage >= 2">
        <a (click)="changePage(currentPage-2)">{{currentPage-1}}</a>
    </li>
    <li *ngIf="currentPage >= 1">
        <a (click)="changePage(currentPage-1)">{{currentPage}}</a>
    </li>
    <li class="active">
        <a (click)="changePage(currentPage)">{{currentPage+1}}</a>
    </li>
    <li *ngIf="currentPage <= totalPage-2">
        <a (click)="changePage(currentPage+1)">{{currentPage+2}}</a>
    </li>
    <li *ngIf="currentPage <= totalPage-3">
        <a (click)="changePage(currentPage+2)">{{currentPage+3}}</a>
    </li>
    <li *ngIf="currentPage <= totalPage-4">
        <a (click)="changePage(currentPage+3)">{{currentPage+4}}</a>
    </li>
    <li class="disabled" *ngIf="currentPage < totalPage-4">
        <a>...</a>
    </li>
    <li [class.disabled]="currentPage > totalPage-2">
        <a (click)="goNext(currentPage)">下一页</a>
    </li>
    <li>
        <a (click)="changePage(totalPage-1)">尾页</a>
    </li>
</ul>

component

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

@Component({
    selector: 'pagination',
    templateUrl: './pagination.component.html',
    styleUrls: ['./pagination.component.css'],
})
export class PaginationComponent {
    @Input() totalPage: number;
    @Input() currentPage: number;
    @Output() pageChange = new EventEmitter<number>();

    constructor() {
    }

    changePage(pageNum) {
        this.pageChange.emit(pageNum);
    }

    goPrevious(pageNum) {
        if (pageNum >= 1) {
            this.changePage(pageNum - 1);
        }
    }

    goNext(pageNum) {
        if (pageNum <= this.totalPage - 2) {
            this.changePage(pageNum + 1);
        }
    }
}

css

.pagination li{
cursor: pointer;
}

Answer 2

1、安装插件

npm install ng2-pagination --save
2、如果使用System.js打包那么就需要配置systemjs.config.js文件

A. map中加入以下代码

'ng2-pagination': 'npm:ng2-pagination'
B. packages中添加以下代码

"ng2-pagination": {

 main: 'index.js',
 defaultExtension: 'js'

}
3、app.module.ts主模块中添加此模块，并添加到imports

import {Ng2PaginationModule} from "ng2-pagination"

@NgModule({

imports: [
    Ng2PaginationModule
],

4、创建file.component.ts文件，提供数据

import {Component} from "@angular/core";
@Component({

selector: "my-page",
templateUrl: "./app/page.html"

})
export class PageComponent {

info: Array; //对象数组
constructor() {
    this.info = [
        {
            "id": 1,
            "name": "html"
        },
        {
            "id": 2,
            "name": "css"
        },
        {
            "id": 3,
            "name": "jquey"
        },
        {
            "id": 4,
            "name": "angular"
        },
        {
            "id": 5,
            "name": "ionic"
        },
        {
            "id": 6,
            "name": "angular2"
        },
        {
            "id": 7,
            "name": "ionic2"
        },
        {
            "id": 8,
            "name": "react"
        },
        {
            "id": 9,
            "name": "node"
        },
        {
            "id": 10,
            "name": "webpack"
        },
        {
            "id": 11,
            "name": "typescript"
        }
    ]
}

}
5、创建模板page.html界面

{{item.name}}

6、提高篇，分页的数据一般都是有父组件提供的，所以数据应该由属性传递给@Input然后获取他的值。 部分代码

父组件 .ts文件 提供数据

export class FatherComponent {

result: Array;
constructor() {
    this.result = [
        {
            "id": 1,
            "name": "html"
        },
        {
            "id": 2,
            "name": "css"
        },
        {
            "id": 3,
            "name: "js"
        }
    ]
}

}
父组件 .html文件

分页组件 .ts文件 使用Input模块获取属性传递过来的数据 info

import {Component, Input} from "@angular/core";
@Component({

selector: "my-page",
templateUrl: "./app/page.html"

})
export class PageComponent {

// 使用@Input接受传递过来的变量,操作。
@Input()
info: Array;