Implementacja
Pomysł jest taki, aby zapewnić łatwy sposób na ponowne wykorzystanie logiki paginacji, co w aplikacji Angularowej oznacza enkapsulację logiki w dyrektywie lub stworzenie komponentu akceptującego Template Refs z niestandardowymi widgetami UI. Jeśli nie jesteś zaznajomiony z Template Refs, gorąco zachęcam do zapoznania się z jednym z moich poprzednich postów ▶️ tutaj.Zdecydowałem się na stworzenie dyrektywy, ponieważ liczba elementów UI, które można dostosować nie jest mała (do 5 elementów) i możesz chcieć innego zachowania, gdy paginator jest w pewnym stanie. Na przykład, gdy wybrana jest pierwsza 1️⃣ lub ostatnia 🏁 strona, można chcieć zrobić coś z przyciskami „przejdź do pierwszej”, „przejdź do poprzedniej strony” lub „przejdź do ostatniej”, „przejdź do następnej strony” 🔘. Możesz wyłączyć te elementy, ukryć je lub zastosować daną klasę CSS. Pomyśl tylko ile właściwości wejściowych odpowiedzialnych za konfigurację, gdyby paginator był zaimplementowany jako komponent 🔥 😱.
Przyjrzyjrzyjmy się fragmentom kodu dyrektywy, zanim przedstawię całą implementację 😏
Dyrektywa wstrzykuje dwie usługi w celu interakcji z bazowym elementem DOM. Dodatkowo jest eksportowana, dzięki czemu można uzyskać dostęp do instancji w szablonie.
Posiada metodę setValue, która jest odpowiedzialna za ustawienie wartości bazowego elementu wejściowego oraz metodę setPage, która wykonuje działania, gdy wybrana strona uległa zmianie.
Dyrektywa eksponuje publiczne metody do bezpośredniej nawigacji imperatywnej do pożądanej strony ✈️.
Dodatkowo posiada dwa publiczne gettery, które wskazują na określone stany paginatora.
Gdy wywołane jest zdarzenie input, dyrektywa zajmuje się usuwaniem nieprawidłowych znaków 🚫.
Gdy wywołane jest zdarzenie change, sprawdzana jest aktualna wartość elementu input i w razie potrzeby zmieniana (wartość pusta lub spoza zakresu). Następnie wywoływane jest zdarzenie pageChange dyrektywy.
Ostatnio, ale nie mniej ważne, zmiany właściwości wejściowych są obsługiwane z uwzględnieniem nieprawidłowych wartości.
Cały kod dyrektyw jest następujący:
.