關於寫分頁組件遇到的幾個問題

前言

分頁功能代碼繁多，卻有共通之處，因此應該寫一個分頁組件一勞永逸，在之後的項目中直接拿來使用。寫分頁組件時參考了原來的選擇組件，但也有些不同。

@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 異步傳值【前】