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組件而後公用，這樣有侷限性，不一樣的分頁內容不一樣，因此循環出來的字段名稱確定不一樣。因此最好不要由父組件提供數據，調用分頁模板，這樣有很大的侷限性。