一.介紹
一個基於angular4 開發的可以分頁的組件。組件的好處就是可以復用，復用.....作為一個前端碼農，開始的分頁功能實現是我用jquery寫的，其他同事用的時候都要將我的代碼拷貝過去，於是我被鄙視了。為了不繼續被鄙視就開始了嘗試。
二.基本功能
1.根據規定的每頁數據條數，分頁顯示數據
2. 上下頁操作數據
直接上界面圖可能清晰點：
根據圖片進行講解下：
根據你總數據條數:totalNum; 每頁顯示條數:pageSize,通過組件會自動給你分頁顯示。
eg：總數41 條數據,每頁顯示10條數據，則是分成5頁。如果想每頁顯示7條，則會分成6頁。
三.簡要代碼
架構目錄圖：
有兩個組件：pagination和page; pagination是用來顯示前面數據的，page是用來下面分頁的。
pagination.html示例代碼：
ngb-xxx不用在意，是用的ng-bootstrap，只是為了讓界面好看點。其實就是一個簡單的table用來顯示數據。*ngFor用來取數據，懂Angular 的人應該都會，這不是重點就不介紹了。
<page ></page> 這里是引入page組件。但是傳入了一些屬性值；關於模板語法，依賴注入，自定義事件就不介紹了。只要知道這里是：pagination組件向page組件傳入了幾個值：pageSize(頁面顯示數據條數)，totalNum(總數據條數),curPage(當前頁碼
），totalPage(總頁碼),pageData(每頁顯示數據)
其中pageSize和pageData是一樣的，只是后面為了操作，多傳了一個值；
那么：pageSize等值都是哪里來的呢，當然是pagination.ts里定義的：
代碼中的page就是你獲得到得數據，自然totalNum就會等於數據的長度。依次算出來就好了。
pagination組件算是完成了，現在就來看看page是怎么接收到數據並進行操作的。
page.html頁面的代碼：
其實很簡單：就一個a標簽顯示條數，頁數的，三個button,一個顯示上一頁，一個頁數，一個下一頁。每個按鈕都綁定了一個changePage事件；
看一下實現部分的代碼：
@Input是接收pagination.html組件傳過來的數據。@Output是定義pagination.html頁面定義的changeCurPage事件。
通過三個if else判斷，對傳多來的數據進行處理。其實就分為：數據只夠顯示一頁；數據顯示到最后一頁；數據刷新到中間頁碼；這三種情況下的操作。
好了，基本就完成了。有些東西也是借助網友的想法，但是思路大致都是這樣。現在我改變條數和數據量看看：
