ng2-pagination 分页组件
1、安装插件
npm install ng2-pagination --save2、如果使用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: Array5、创建模板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、最后修改分页英文字母为中文的文件
node_modules/ng2-pagination/dist/template.js 修改上一页、下一页
8、注意
其实，这个分页组件重在循环html部分内容，ts文件只是提供数据，所以，最好的用法就是，每个需要分页的组件的模板中，加入分页组件的这段html代码就可以了，不需要专门命名为page组件然后公用，这样有局限性，不同的分页内容不同，所以循环出来的字段名称肯定不同。所以最好不要由父组件提供数据，调用分页模板，这样有很大的局限性。