npm install ng2-pagination --save
2、如果使用System.js打包那么就需要配置systemjs.config.js文件@H_403_3@
'ng2-pagination': 'npm:ng2-pagination'
"ng2-pagination": { main: 'index.js',defaultExtension: 'js' }
3、app.module.ts主模块中添加此模块,并添加到imports@H_403_3@
import {Ng2PaginationModule} from "ng2-pagination" @NgModule({ imports: [ Ng2PaginationModule ],
4、创建file.component.ts文件,提供数据@H_403_3@
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" } ] } }
5、创建模板page.html界面@H_403_3@
<ul> <li *ngFor="let item of info | paginate: { itemsPerPage: 10,currentPage: p }">{{item.name}}</li> </ul> <pagination-controls (pageChange)="p = $event"></pagination-controls>
6、提高篇,分页的数据一般都是有父组件提供的,所以数据应该由属性传递给@Input然后获取他的值。 部分代码@H_403_3@
export class FatherComponent { result: Array<Object>; constructor() { this.result = [ { "id": 1,"name: "js" } ] } }
<!-- 把父组件的信息传递给分页组件,进行分页。 --> <my-page [info]="result"></my-page>
分页组件 .ts文件 使用Input模块获取属性传递过来的数据 info@H_403_3@
import {Component,Input} from "@angular/core"; @Component({ selector: "my-page",templateUrl: "./app/page.html" }) export class PageComponent { // 使用@Input接受传递过来的变量,操作。 @Input() info: Array<Object>; }
<ul> <li *ngFor="let item of info | paginate: { itemsPerPage: 10,currentPage: p }">{{item.name}}</li> </ul> <pagination-controls (pageChange)="p = $event"></pagination-controls>
7、最后修改分页英文字母为中文的文件
node_modules/ng2-pagination/dist/template.js 修改上一页、下一页@H_403_3@
8、注意@H_403_3@
其实,这个分页组件重在循环html部分内容,ts文件只是提供数据,所以,最好的用法就是,每个需要分页的组件的模板中,加入分页组件的这段HTML代码就可以了,不需要专门命名为page组件然后公用,这样有局限性,不同的分页内容不同,所以循环出来的字段名称肯定不同。所以最好不要由父组件提供数据,调用分页模板,这样有很大的局限性。