前言回顧

到目前爲止，我們已經實現了 hacker news 大部分頁面功能設計，但是仍然缺少一個重要的翻頁功能，API 現在沒人是返回 20 條數據，我們今天會使用 Pagination 組件 將分頁功能實現。

分頁操作

接口修改

爲了支持分頁功能，我們對當前接口進行修改，支持 page 和 pageSize 來接受當前頁碼和每頁渲染數目。

/**
   * 更多參考 https://hn.algolia.com/api
   * @param query: 查詢內容
   * @param page: 當前頁碼
   * @param pageSize: 每頁顯示數目
   * @param sortType: 排序方式，常規或最新
   * @param tags: 結果類型
   */
getStoriesByAlgolia(query = '', page = 1, pageSize = 20, sortType: 'search' | 'search_by_date' = 'search', tags = IAvailableTags.STORY): Observable<IHackerNews> {
  const params = new HttpParams().append('tags', tags).append('page', page.toString()).append('hitsPerPage', pageSize.toString());
if (query) {
  params.append('query', query);
}
return this.http.get<IHackerNews>(`${this.BASE_URL_ALGOLIA}/${sortType}`, { params, responseType: 'json' });
}

Pagination分頁

在 Table 組件使用時，我們已經見過分頁功能了，實際上，Table 的分頁功能也是使用 Pagination分頁 組件實現的。

<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>

一個分頁組件除了需要頁碼顯示外，也會需要每頁渲染條數、總數據量顯示等等功能，我們在下面會逐步添加所需要的功能。

頁碼或每頁數目變化

<nz-pagination
	[nzTotal]="totalCount"
	[(nzPageIndex)]="currentPage"
	[(nzPageSize)]="pageSize"
	(nzPageIndexChange)="getStories()"
	(nzPageSizeChange)="getStories()"
	nzShowSizeChanger
	[nzPageSizeOptions]="[10, 20, 30, 50]"></nz-pagination>

...
// total news count
totalCount = 0;
getStories() {
  ...
  this.hackerNewsService.getStoriesByAlgolia(this.queryString, this.currentPage, this.pageSize, this.sortType).subscribe(data => {
	// total count: tell pagination to show how many pages
	this.totalCount = data.nbPages * this.pageSize;
	...
  });
}

我們對每次頁碼切換和每頁數目變化都重新請求了數據，添加 nzShowSizeChanger 和 nzPageSizeOptions 自定義每頁顯示數目：

看一下我們的頁面變成了什麼樣：

顯示總數

algolia 接口返回的數據中雖然返回了總數據量 nbHits，但是它爲了減少請求壓力，默認只返回最多1000條數據，而我們希望將真實的數據量顯示出來該怎麼做呢？

nzShowTotal 可以幫助我們解決：

nzShowTotal 用於顯示數據總量和當前數據範圍，具體使用方式見代碼演示部分

<nz-pagination
	[nzTotal]="totalCount"
	[(nzPageIndex)]="currentPage"
	[(nzPageSize)]="pageSize"
	(nzPageIndexChange)="getStories()"
	(nzPageSizeChange)="getStories()"
	nzShowSizeChanger
	[nzPageSizeOptions]="[10, 20, 30, 50]"
	[nzShowTotal]="totalTemplate" ></nz-pagination>
<ng-template #totalTemplate let-total> Total {{ totalRealCount }} news </ng-template>

...
// real total count
totalRealCount = 0;
getStories() {
  ...
  this.hackerNewsService.getStoriesByAlgolia(this.queryString, this.currentPage, this.pageSize, this.sortType).subscribe(data => {
	// set real count to show
    this.totalRealCount = data.nbHits;
	...
  });
}

定製翻頁模板

當然，如果你對默認的 前一頁 和 後一頁 的樣式不滿意，也可以通過 nzItemRender 來自定義頁碼的結構。感興趣的可以看一下 stackblitz 在線示例 來了解如何使用。

總結 & 預告

我們今天使用 Pagination 組件實現了分頁相關功能，這個組件對於項目中數據量過多需要分頁的情況十分有用。目前爲止我們在這個數據顯示頁面的工作基本已經完成了，同時我們也發現了新聞結果中有 comments 信息，在之後的示例中我們也會去實現。

相關資料

• Github 今日代碼分支：https://github.com/simplejason/ng-zorro-ironman2020/tree/day-15-hacker-news-pagination
• Pagination：https://ng.ant.design/components/pagination/zh