Angular paginátor a semmiből megvalósítva

Implementáció

Az ötlet az, hogy egyszerű módot biztosítsunk a paginálási logika újrafelhasználására, ami az Angular alkalmazásban a logika egy direktívába való kapszulázását jelenti, vagy egy olyan komponens létrehozását, amely egyéni UI widgetekkel fogadja a Template Ref-eket. Ha nem ismered a Template Ref-eket, erősen ajánlom, hogy nézd meg az egyik korábbi bejegyzésemet ▶️ itt.Úgy döntöttem, hogy egy direktívát hozok létre, mivel a testreszabható UI elemek száma nem kicsi (legfeljebb 5 elem), és lehet, hogy más viselkedést szeretnél, amikor a paginátor bizonyos állapotban van. Például, amikor az első 1️⃣ vagy az utolsó 🏁 oldal van kiválasztva, akkor lehet, hogy szeretnél valamit csinálni a ‘go to first’, ‘go to previous page’ vagy ‘go to last’, ‘go to next page’ gombokkal 🔘. Vagy letilthatod az elemeket, vagy elrejtheted őket, vagy alkalmazhatsz egy adott CSS osztályt. Gondoljunk csak a konfigurációért felelős bemeneti tulajdonságok számára, ha a paginátor komponensként lenne implementálva 🔥 😱.

Vessünk egy pillantást a direktíva kódjának egyes részeire, mielőtt bemutatom a teljes implementációt 😏

A direktíva két szolgáltatást injektál a mögöttes DOM elemmel való interakció érdekében. Ráadásul exportált, így egy sablonban is elérhetünk egy példányt.

Ez rendelkezik a setValue metódussal, amely a mögöttes input elem értékének beállításáért felelős, valamint a setPage metódussal, amely műveleteket hajt végre, ha a kiválasztott oldal megváltozott.

A direktíva nyilvános metódusokat tár fel a közvetlen imperatív navigációhoz a kívánt oldalra ✈️.

Ezeken kívül két nyilvános getterrel rendelkezik, amelyek jelzik a paginátor bizonyos állapotait.

A beviteli esemény tüzelésekor a direktíva gondoskodik az érvénytelen karakterek eltávolításáról 🚫.

A változás esemény tüzelésekor a beviteli elem aktuális értékét ellenőrzi és szükség esetén módosítja (üres vagy tartományon kívüli érték). Ezután a direktíva pageChange eseménye tüzelésre kerül.

Végül, de nem utolsósorban a bemeneti tulajdonságok változásait az érvénytelen értékek figyelembevételével kezeli.

A direktíva teljes kódja a következő:

Szólj hozzá!