关于写分页组件遇到的几个问题

前言

分页功能代码繁多，却有共通之处，因此应该写一个分页组件一劳永逸，在之后的项目中直接拿来使用。写分页组件时参考了原来的选择组件，但也有些不同。

@Input

写分页组件，最重要的就是肯定向里接收和向外传的值，也就是@output和@input的值。
咱们把分页的html代码粘贴到v层，哪些变量没有，咱们就须要传入哪些变量，

咱们须要第几页的page变量，每页几个的size变量和总页数totalpages变量，这就是咱们须要@input的值。
一开始我是参考选择组件传入的对象

@Input() pageObject: {totalPages: number};
  @Input() params: {size: number, page: number};

后来在老师的指导下，传入具体变量，对象里的变量改变不会引发对象改变。

@Input() totalPages: number;
  @Input() size: number;
  @Input() page: number;

异步请求

咱们应该防止在没有学生的时候异步请求，而如今在没有学生时显示异常

咱们能够在没有学生的时候不显示分页组件，在调用分页组件时加一个判断。
一开始我参考选择组件的例子，对对象进行判断，

<app-page *ngIf="pageStudent" [setTotalPages]="pageStudent.totalPages" [setPage]="params.page" [setSize]="params.size" (selected)="onPageSelected($event)"></app-page>

可是并无论用，原来我在c层对pageStudent进行了初始化，无论怎样他都是不会null的，因此咱们换一个判断。总页数在没有学生时是0，在有学生时是大于0，咱们根据这个进行判断

<app-page *ngIf="pageStudent.totalPages != 0" [setTotalPages]="pageStudent.totalPages" [setPage]="params.page" [setSize]="params.size" (selected)="onPageSelected($event)"></app-page>

这样解决了问题。

@Output

一开始作的时候也没有肯定@output的值，作到最后发现没有须要@output的值。老师一问问到我了，为何学生列表会带着点击的page进行访问，可是分页组件没有传page值。
原来咱们@input params的时候，将对象拿来调用，咱们在分页组件里改变了params里的page值，因此学生列表里的params也会改变。
可是这种逻辑是不正确的，咱们不该该把传入的params改变。这时咱们就用到了@output，咱们将page值output出去，在学生列表组件里改变params.page的值，这才是正确的写法。
分页组件

@Output() selected = new EventEmitter<number>();

学生列表组件

onPageSelected(page: number) {
    this.params.page = page;
    this.loadData();
}

异步传值

为了防止异步传值，咱们须要在@input的时候进行初始化，咱们要改变咱们的@input
具体代码

@Input() set setTotalPages(totalPages: number) {
    this.totalPages = totalPages;
    this.pages = this.makePagesByTotalPages(this.page, totalPages);
  }
  @Input() set setPage(page: number) {
    this.page = page;
    this.pages = this.makePagesByTotalPages(page, this.totalPages);
  }
  @Input() set setSize(size: number) {
    this.size = size;
    this.pages = this.makePagesByTotalPages(this.page, this.totalPages);
  }

  page: number;
  totalPages: number;
  size: number;

将input输入的由变量变为函数，这样每次有新的变量传入时，都会执行一下初始化方法。

总结

其实发现咱们不对上述进行改变，分页组件也能够运行，可是咱们想要本身的代码变得更加健壮，不在之后添麻烦，就不止要考虑如何实现。
参考：
angular组件间通信
@Input()【前】
@Output()【前】
@Input 异步传值【前】