angular2 ng2-pagination 分页组件

ng2-pagination 分页组件

一、安装插件

npm install ng2-pagination --save

二、若是使用System.js打包那么就须要配置systemjs.config.js文件

A. map中加入如下代码

'ng2-pagination': 'npm:ng2-pagination'

B. packages中添加如下代码

"ng2-pagination": {
     main: 'index.js',
     defaultExtension: 'js'
}

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

import {Ng2PaginationModule} from "ng2-pagination"

@NgModule({
    imports: [
        Ng2PaginationModule
    ],

四、建立file.component.ts文件，提供数据

import {Component} from "@angular/core";
@Component({
    selector: "my-page",
    templateUrl: "./app/page.html"
})
export class PageComponent {
    info: Array<Object>; //对象数组
    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"
            }
        ]
    }
}

五、建立模板page.html界面

<ul>
    <li *ngFor="let item of info | paginate: { itemsPerPage: 10, currentPage: p }">{{item.name}}</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>

六、提升篇，分页的数据通常都是有父组件提供的，因此数据应该由属性传递给@Input而后获取他的值。 部分代码

父组件 .ts文件 提供数据

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

父组件 .html文件

<!-- 把父组件的信息传递给分页组件, 进行分页。 -->
<my-page [info]="result"></my-page>

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

import {Component, Input} from "@angular/core";
@Component({
    selector: "my-page",
    templateUrl: "./app/page.html"
})
export class PageComponent {
    // 使用@Input接受传递过来的变量,操做。
    @Input()
    info: Array<Object>;
}

分页模板代码不变，经过info获取数据

<ul>
    <li *ngFor="let item of info | paginate: { itemsPerPage: 10, currentPage: p }">{{item.name}}</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>

七、最后修改分页英文字母为中文的文件
node_modules/ng2-pagination/dist/template.js 修改上一页、下一页

八、注意

其实，这个分页组件重在循环html部份内容，ts文件只是提供数据，因此，最好的用法就是，每一个须要分页的组件的模板中，加入分页组件的这段html代码就能够了，不须要专门命名为page组件而后公用，这样有局限性，不一样的分页内容不一样，因此循环出来的字段名称确定不一样。因此最好不要由父组件提供数据，调用分页模板，这样有很大的局限性。