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

前言

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

@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 异步传值【前】