ng2-pagination 分页组件

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

5、创建模板page.html界面

    
    
     
{
   {item.name}}
    
    

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

父组件 .ts文件 提供数据

export class FatherComponent {    result: Array

父组件 .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

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

    
    
     
{
   {item.name}}
    
    

7、最后修改分页英文字母为中文的文件

8、注意

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