Implementare
Ideea este de a oferi o modalitate ușoară de reutilizare a logicii de paginare, care în aplicația Angular înseamnă încapsularea logicii într-o directivă sau crearea unei componente care acceptă Template Refs cu widget-uri UI personalizate. Dacă nu sunteți familiarizați cu Template Refs, vă încurajez să aruncați o privire la unul dintre postările mele anterioare ▶️ aici. am decis să creez o directivă, deoarece numărul de elemente UI care pot fi personalizate nu este mic (până la 5 elemente) și este posibil să doriți un comportament diferit atunci când paginatorul se află într-o anumită stare. De exemplu, atunci când este selectată prima 1️⃣ sau ultima 🏁 pagină, s-ar putea să doriți să faceți ceva cu butoanele „go to first”, „go to previous page” sau „go to last”, „go to next page” 🔘. Puteți fie să dezactivați elementele, fie să le ascundeți, fie să le aplicați o anumită clasă CSS. Gândiți-vă doar la numărul de proprietăți de intrare responsabile de configurare dacă paginatorul ar fi fost implementat ca o componentă 🔥 😱.
Să aruncăm o privire asupra unor părți din codul directivei înainte de a prezenta întreaga implementare 😏
Directiva injectează două servicii pentru a interacționa cu elementul DOM subiacent. În plus, este exportată, astfel încât să puteți accesa o instanță într-un șablon.
Dispune de metoda setValue, care este responsabilă pentru stabilirea valorii elementului de intrare subiacent și de metoda setPage, care efectuează acțiuni atunci când pagina selectată s-a schimbat.
Directiva expune metode publice pentru navigarea imperativă directă către o pagină dorită ✈️.
În plus, are doi getteri publici care indică anumite stări ale paginatorului.
Când se declanșează evenimentul de intrare, directiva se ocupă de eliminarea caracterelor invalide 🚫.
Când se declanșează evenimentul de modificare, valoarea curentă a elementului de intrare este verificată și modificată dacă este necesar (valoare goală sau în afara intervalului). Apoi se declanșează evenimentul pageChange al directivei.
În sfârșit, dar nu în ultimul rând, modificările proprietăților de intrare sunt gestionate ținând cont de valorile invalide.
Codul complet al directivelor este următorul:
.