17年4月，开始学习angular2，到5月跟着升级到angular4。目前还在学习，搭建中。我的最终目的是用angular4框架搭建一个后台管理系统。这里使用了三个关键的外部库。
1、使用adminLte 皮肤。这个是bootstrap的一款皮肤。风格比较严肃。所以选这个皮肤；
2、引用了ngx-bootstrap。这个是bootstrap对应angular的库；
3、使用wijmo5 flexgrid表格，号称是angular下最好的表格组件。
本章说下如何搭建一个flexgrid通用分页器组件，angular的核心就是组件化，所以在搭建组件上，天生就有长处。一般是在父类组件上添加flexgrid的表格，所有和分页相关的信息，按钮。整合进入分页器组件内。所以我们先明确父类组件和分页器组件之间需要传递的参数。
父类组件向分页器组件传递两个参数，当前页面 pageindex 。页码总数 pagecount。在分页器子类组件内，点击跳转按钮。调用父类组件的输定绑定函数，重新绑定表格即可。分页器最终效果如下
demo 演示地址 http://121.42.203.123
github地址 https://github.com/Vetkdf/yang-test
分页器组件ts代码，关键就是两个Input参数，一个Output监听。
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-paging',
templateUrl: './paging.component.html',
styleUrls: ['./paging.component.css']
})
export class PagingComponent implements OnInit {
constructor() { }
@Input() pageIndex: number = 1;
@Input() pageCount: number = 1;
@Output() change: EventEmitter<number> = new EventEmitter<number>();
ngOnInit() {
}
moveToFirstPage() {
this.change.emit(1);
}
moveToPreviousPage() {
this.change.emit(this.pageIndex - 1);
}
moveToNextPage(){
this.change.emit(this.pageIndex + 1);
}
moveToLastPage() {
this.change.emit(this.pageCount);
}
}
分页器组件html代码，四个按钮跳转最后，最前，上一页，下一页。按钮要把消息传递给父类组件，触发重绑定表格即可。
<div class="btn-group">
<button type="button" class="btn btn-default"
(click)="this.moveToFirstPage()"
[disabled]="this.pageIndex <= 1">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default"
(click)="this.moveToPreviousPage()"
[disabled]="this.pageIndex <= 1">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" class="btn btn-default" disabled style="width:100px">
{{ this.pageIndex | number }} / {{ this.pageCount | number }}
</button>
<button type="button" class="btn btn-default"
(click)="this.moveToNextPage()"
[disabled]="this.pageIndex >= this.pageCount">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
<button type="button" class="btn btn-default"
(click)="this.moveToLastPage()"
[disabled]="this.pageIndex >= this.pageCount">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
父类调用代码
<app-paging [pageIndex]="this.pageIndex" [pageCount]="this.pageCount" (change)="bindpage($event)"></app-paging>
父类绑定分页数据ts代码
private bindpage(event:number):void {
this.GetList.GetListPageBy_M2V3(event,this.comId).then(backobj =>{
this.cvPaging.sourceCollection = backobj.List;
this.pageIndex = backobj.PageIndex;
this.pageCount = backobj.CountPage;
});
}
如果下载github上的源码。可以好好看下M2V1组件源码。这个组件演示全国的省市区信息并进行分页，angular4的模块化划分还是做的非常好的。