封装了一个集成度比较高的分页组件,实现样式交互以及换页动作全程代理

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内部的源代码和一些注释