Angular Search & Pagination

Componenta de paginare

Pentru componenta noastră de paginare, ceea ce trebuie să facem sunt două lucruri principale: să redăm toate numerele de pagini posibile pentru ca utilizatorul să le aleagă și să detectăm când pagina s-a schimbat pentru a prelua datele din pagina aleasă.

În primul rând, vom adăuga la componenta noastră o proprietate Input pentru a primi informațiile de care avem nevoie pentru a crea paginația: dimensiunea paginilor și numărul total de elemente.

Vă veți da seama că, în loc de o proprietate input directă, am folosit un setter pentru a intercepta proprietatea input primită. Asta din două motive: pentru a rotunji pagesAmount (în cazul în care, din orice motiv, nu era deja rotunjită) și, de asemenea, pentru a umple un Array de numere cu pagesAmount.

Ok, deci de ce avem nevoie de un Array de numere? Pentru a reda toate paginile posibile pentru utilizator. În Angular nu putem lua direct un număr și să cerem o buclă *ngFor de un anumit număr de ori, așa că aceasta este o strategie pe care o folosesc de obicei pentru a depăși acest lucru.

Ce facem este: folosind un array de numere, putem face o buclă prin el și să folosim indexul pentru a prelua numărul dorit. Deoarece ceea ce dorim este doar o listă obișnuită de numere ordonate, este simplu de realizat, așa cum se arată în marcajul de mai jos.

<span
*ngFor="let page of pagesArray; let index = index"
="{ 'active': currentPage === index + 1 } 
(click)="setPage(index + 1)"
>
{{ index + 1 }}
</span>

În acest marcaj redăm toate paginile posibile pentru ca utilizatorul să aleagă. Am adăugat un ngClass pentru a seta un anumit stil pe pagina selectată în mod curent, pentru a permite utilizatorului să știe în ce pagină se află în prezent. De asemenea, am inserat o acțiune click care va emite un eveniment care va permite componentei părinte să știe că pagina selectată s-a schimbat.

Acum, să adăugăm, de asemenea, două săgeți pentru a face viața utilizatorilor noștri mai ușoară; una pentru a merge înapoi cu o pagină și una pentru a merge înainte cu o pagină. Cu toate acestea, vom ascunde săgeata din stânga atunci când ne aflăm în prezent la prima pagină și vom ascunde săgeata din dreapta atunci când ne aflăm în prezent la ultima pagină.

Dar avem încă o problemă aici! Ce se întâmplă dacă itemsAmount al nostru este de sute și pageSize este mic? Sau chiar mii de articole? Ar trebui să redăm toate paginile deodată și am avea o uzabilitate destul de proastă cu toate acele numere atârnând acolo.

Există câteva posibile soluții de proiectare pentru această problemă, cum ar fi ascunderea paginilor din mijloc sau ascunderea ultimelor pagini după un anumit număr. Cea pe care o voi arăta este simplu de realizat și cred că poate fi interesantă în unele cazuri; și anume schimbarea numerelor de la a fi doar tipărite la a folosi un element html de selectare cu fiecare pagină ca opțiune.

Acum, revenind la marcajul nostru, vom adăuga următoarele modificări la partea în care redăm numerele paginilor noastre:

Cod final

Acum, punând toate piesele noastre împreună, acesta ar fi codul final pentru o componentă de paginare simplă dar eficientă implementată. Aceasta primește un input cu dimensiunea paginilor și cantitatea totală de articole și permite utilizatorului să selecteze pagina pe care dorește să o vizualizeze, declanșând un eveniment care indică pagina selectată pentru a gestiona logica/cererile de paginare necesare.

.