[外门弟子]JS-9|2019年09月29日的日报-技能树.IT修真院

发表于： 2019-09-29 11:40:38

0 763

今天完成的事情：修复分页组件的bug。虽然今天上午很顺利就解决了，但是之前有思考过很多。这篇博客启发了我：https://blog.csdn.net/baobab_cc/article/details/79234419

之前在做分页组件的时候，我的代码是这样的，

html部分：

<nz-pagination [(nzPageIndex)]="pageindex" [(nzPageSize)]="pagesize" [(nzTotal)]="total" nzShowQuickJumper (click)="getdata($event）
  ></nz-pagination>

这个逻辑就是，当我点击我的分页组件的1,2,3,4等按钮的时候，捕捉到按钮的innerHTML然后向后端发出ajax请求，比如我点击了按钮1，我就请求第一页的数据。

今天的做法是这样的：

html部分：

<nz-pagination [(nzPageIndex)]="pageindex" [(nzPageSize)]="pagesize" [(nzTotal)]="total" nzShowQuickJumper
  ></nz-pagination>

这里，我删除了(click)="getdata($event），因为ant-design的分页组件本来就暴露了一个接口，绑定了一个变量pageindex，只有pageindex一旦变化，我检测到变化就可以向后端发出请求。检测变化需要用到Docheck生命周期器函数，而且这个函数你直接使用，它会不断的调用，导致页面出现抖动，需要设置一个if条件然后再使用，具体可以参考：https://blog.csdn.net/baobab_cc/article/details/79234419

核心的ts代码如下：

 pageindex :string;
  oldPageindex: string;
  counts: number = 0;

//根据页数，获得article列表

  getdata() {

    console.log("pageindex:" + this.pageindex);

    const url = '/apidata/a/article/search/';
    const params = new HttpParams()
      .set('page', this.pageindex);
    const jump = this.http.get(url, { params });
    jump.subscribe((date: any) => {
      console.log(date);
      this.listOfData = date.data.articleList;
    }, err => {
      console.log(err);
    });
  }

 ngDoCheck() {
    //this.getdata();
    if (this.pageindex !== this.oldPageindex) {
      console.log(`你从${this.oldPageindex}改成${this.pageindex}`);
      this.oldPageindex = this.pageindex;
      this.getdata();
    } else {
      this.counts = this.counts + 1;
      console.log("没有任何改变地调用了" + this.counts + "次");
    }