angular2-pager v0.1.2
封装了一个集成度比较高的分页组件,实现样式交互以及换页动作全程代理
1. 引用模块上
- imports:PagerModule 一般非子路由懒加载的模式,直接在AppModule模块上import即可。子路由懒加载模式,需要在子模块的级别import。
- providers:PagerService 在引用的模块上声明提供PagerService,即可在模块范围内注入该实例
2. 编写正常的查询接口,但箭头化(要求为可观察对象)
//正常接口
getExamples(query : string) : Observable<Example[]> {
return this.http.get(`${this.baseApi}${query}`);
//=============================>>>>>>>>>>>>>>>>>>>>>>>>
//箭头化
getExamples = (query : string) : Observable<Example[]> => {
return this.http.get(`${this.baseApi}${query}`);
一定要箭头化,这是为了使函数被pager代理执行的时候,内部this指向正确。因为pager内部也只是直接调用。
pager每次调用接口时会传递一个query参数,包含了?page=x&size=x
类似的字符串,处理时
直接将其拼接在api上即可(不用自己拼接'?'),也可能有更多参数会被合并在query参数里,这取决于pager配置时有没有配置query字段。
2. 声明注入级别
根据自己的所需注入PagerService即可
3. 模块内使用
<angular2-pager [pagerService]="pagerService" [color]="'#555'"></angular2-pager>
分页组件不绑定任何一个分页服务的实例,而是为它做一些相关的逻辑展示。 所以它可以被多个分页服务实例公用,也因此分页的服务实例必须手动提供, 除此之外它允许定制主题颜色
4. 绑定数据
我们应当在模块的主组件上初始化分页组件的服务,并发起第一次初始化的数据请求
getExamples = (query : string) : Observable<Example[]> => {
return this.http.get(`${this.baseApi}${query}`);
//初始化第一页
pagerService.config({
service : this.getExamples,
query : 'sort=id'
}).init();
//有搜索条件,接口不需要更改,更改query参数即可,通常搜索也是从第一页开始显示,所以调用init
pagerService.config({
query : 'name=cmx&sort=id'
}).init();
//只是更换排序条件,不需要把页数重置到1
pagerService.config({
query : 'sort=id2'
}).getResult().subscribe();
/**
* field配置接口数据的交互策略。
* resolve为服务器返回的数据中, 各字段的映射配置, path为分页信息路径, dataPath为数据集的路径, l路径较深的可以直接使用.列出,例如data.content
* fetch为发起分页请求时请求页和页数据量的配置,通常都为page和size,所以不需要配置。
*/
pagerService.config({
service : this.getExamples,
query : 'sort=id',
field : {
resolve : {
path : 'page',
dataPath : 'data',
pageCount : 'pageCount',
count : 'count',
page : 'number',
size : 'size',
first : 0
},
fetch : {
page : 'page',
size : 'size'
}
}
}).init();
//以下为spring mvc默认通常返回的数据类型配置
{
"content" : [],
"totalPages": 7,
"last": false,
"totalElements": 65,
"size": 10,
"number": 0,
"numberOfElements": 10,
}
pagerService.config({
service : this.getExamples,
field : {
resolve : {
path : '',
dataPath : 'content',
pageCount : 'totalPages',
count : 'totalElements',
page : 'number',
size : 'size',
first : 0
}
}
}).init();
主组件首先注入pagerService,它提供一个配置方法,并返回可以发起数据请求的两个函数, 这里代理的服务接口service一定要配置,但也只需要配置一次即可。我们如果需要除分页参数外的其它参数,例如搜索条件等,可以配置query参数,分页组件会自动帮我们拼接 配置完成得到两个方法,init和getResult,init用于从未获取过分页数据的情况,首次获取,自动订阅 getResult用于正常的请求,init会重置当前页数信息,例如原本查看第5页, 调用init将跳回第一页,getResult则会维持它们。getResult为一个观察者对象,需要手动订阅。
每次想主动调用init和getResult都需要首先config,哪怕是不传参数
5. 获取分页组件的输出
只要调用过init方法初始化分页成功,即可任何时候都通过getPager方法获取分页组件输出的数据。
pagerService.getPager() = {
page : 1, //当前页
size : 10, //每页数据量
pageCount : 0, //总页数
count : 0, //总数据量
hasNext : false, //是否有上一页
hasPrev : false, //是否有下一页
lastPage : 0, //最后一页页码
firstPage : 0, //第一页页码
result : [] //通过接口获取到的结果集被同时保存在此处
}
更详细的可以查看pagerService内部的源代码和一些注释