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ő: