一.介紹
??? 一個(gè)基于angular4 開(kāi)發(fā)的可以分頁(yè)的組件钓猬。組件的好處就是可以復(fù)用，復(fù)用.....作為一個(gè)前端碼農(nóng)吨瞎，開(kāi)始的分頁(yè)功能實(shí)現(xiàn)是我用jquery寫(xiě)的仪芒，其他同事用的時(shí)候都要將我的代碼拷貝過(guò)去，于是我被鄙視了出吹。為了不繼續(xù)被鄙視就開(kāi)始了嘗試遇伞。
二.基本功能
?? 1.根據(jù)規(guī)定的每頁(yè)數(shù)據(jù)條數(shù)，分頁(yè)顯示數(shù)據(jù)
??? 2. 上下頁(yè)操作數(shù)據(jù)
?? 直接上界面圖可能清晰點(diǎn)：
根據(jù)圖片進(jìn)行講解下：
? ? 根據(jù)你總數(shù)據(jù)條數(shù):totalNum; 每頁(yè)顯示條數(shù):pageSize,通過(guò)組件會(huì)自動(dòng)給你分頁(yè)顯示捶牢。
??? eg：總數(shù)41 條數(shù)據(jù),每頁(yè)顯示10條數(shù)據(jù)鸠珠，則是分成5頁(yè)。如果想每頁(yè)顯示7條秋麸，則會(huì)分成6頁(yè)渐排。
三.簡(jiǎn)要代碼
? 架構(gòu)目錄圖：
?
有兩個(gè)組件：pagination和page;? pagination是用來(lái)顯示前面數(shù)據(jù)的，page是用來(lái)下面分頁(yè)的灸蟆。
pagination.html示例代碼：
ngb-xxx不用在意驯耻，是用的ng-bootstrap，只是為了讓界面好看點(diǎn)。其實(shí)就是一個(gè)簡(jiǎn)單的table用來(lái)顯示數(shù)據(jù)可缚。*ngFor用來(lái)取數(shù)據(jù)霎迫，懂Angular 的人應(yīng)該都會(huì)，這不是重點(diǎn)就不介紹了帘靡。
<page ></page>? 這里是引入page組件知给。但是傳入了一些屬性值；關(guān)于模板語(yǔ)法测柠，依賴(lài)注入炼鞠，自定義事件就不介紹了。只要知道這里是：pagination組件向page組件傳入了幾個(gè)值：pageSize(頁(yè)面顯示數(shù)據(jù)條數(shù))轰胁，totalNum(總數(shù)據(jù)條數(shù)),curPage(當(dāng)前頁(yè)碼
）谒主，totalPage(總頁(yè)碼),pageData(每頁(yè)顯示數(shù)據(jù))
其中pageSize和pageData是一樣的，只是后面為了操作赃阀，多傳了一個(gè)值霎肯；
那么：pageSize等值都是哪里來(lái)的呢，當(dāng)然是pagination.ts里定義的：
??????? 代碼中的page就是你獲得到得數(shù)據(jù)榛斯，自然totalNum就會(huì)等于數(shù)據(jù)的長(zhǎng)度观游。依次算出來(lái)就好了。
??????? pagination組件算是完成了驮俗，現(xiàn)在就來(lái)看看page是怎么接收到數(shù)據(jù)并進(jìn)行操作的懂缕。
?? ? ? page.html頁(yè)面的代碼： ????
其實(shí)很簡(jiǎn)單：就一個(gè)a標(biāo)簽顯示條數(shù)，頁(yè)數(shù)的王凑，三個(gè)button,一個(gè)顯示上一頁(yè)搪柑，一個(gè)頁(yè)數(shù)，一個(gè)下一頁(yè)索烹。每個(gè)按鈕都綁定了一個(gè)changePage事件工碾；
看一下實(shí)現(xiàn)部分的代碼：
@Input是接收pagination.html組件傳過(guò)來(lái)的數(shù)據(jù)。@Output是定義pagination.html頁(yè)面定義的changeCurPage事件百姓。
通過(guò)三個(gè)if else判斷渊额，對(duì)傳多來(lái)的數(shù)據(jù)進(jìn)行處理。其實(shí)就分為：數(shù)據(jù)只夠顯示一頁(yè)垒拢；數(shù)據(jù)顯示到最后一頁(yè)旬迹；數(shù)據(jù)刷新到中間頁(yè)碼；這三種情況下的操作求类。
好了奔垦，基本就完成了。有些東西也是借助網(wǎng)友的想法仑嗅，但是思路大致都是這樣。現(xiàn)在我改變條數(shù)和數(shù)據(jù)量看看：
???
