Implementering
Idén är att tillhandahålla ett enkelt sätt att återanvända pagineringslogiken, vilket i Angular-applikationer innebär att logiken kapslas in i ett direktiv eller att skapa en komponent som accepterar Template Refs med anpassade UI-widgetar. Om du inte är bekant med Template Refs, uppmuntrar jag dig starkt att ta en titt på ett av mina tidigare inlägg ▶️ här. jag bestämde mig för att skapa ett direktiv, eftersom antalet UI-element som kan anpassas inte är litet (upp till 5 objekt) och du kanske vill ha ett annat beteende när paginatorn är i visst tillstånd. Till exempel när den första 1️⃣ eller sista 🏁 sidan är vald kan du vilja göra något med knapparna ”gå till första”, ”gå till föregående sida” eller ”gå till sista”, ”gå till nästa sida” 🔘. Du kan antingen inaktivera elementen, dölja dem eller tillämpa en viss CSS-klass. Tänk bara på antalet ingångsegenskaper som ansvarar för konfigurationen om paginatorn hade implementerats som komponent 🔥 😱.
Låt oss ta en titt på delar av direktivets kod innan jag presenterar hela implementationen 😏
Direktivet injicerar två tjänster för att interagera med det underliggande DOM-elementet. Dessutom exporteras det, så att du kan få tillgång till en instans i en mall.
Det har metoden setValue som ansvarar för att ställa in det underliggande inmatningselementets värde och metoden setPage som utför åtgärder när den valda sidan har ändrats.
Direktivet exponerar offentliga metoder för direkt imperativ navigering till en önskad sida ✈️.
Direktivet har dessutom två offentliga getters som anger vissa paginatorns tillstånd.
När inmatningshändelsen utlöses tar direktivet hand om att ta bort ogiltiga tecken 🚫.
När ändringshändelsen utlöses kontrolleras inmatningselementets aktuella värde och ändras vid behov (tomt värde eller värde som ligger utanför området). Därefter utlöses direktivets pageChange-händelse.
Sist men inte minst hanteras ändringar av inmatningsegenskaper med hänsyn till ogiltiga värden.
Direktivets hela kod ser ut på följande sätt: