Implementering
Ideen er at give en nem måde at genbruge pagineringslogikken på, hvilket i Angular-applikation betyder at indkapsle logikken i et direktiv eller oprette en komponent, der accepterer Template Refs med brugerdefinerede UI-widgets. Hvis du ikke er bekendt med Template Refs, opfordrer jeg dig stærkt til at tage et kig på et af mine tidligere indlæg ▶️ her. jeg besluttede at oprette et direktiv, da antallet af UI-elementer, der kan tilpasses, ikke er lille (op til 5 elementer), og du kan ønske en anden adfærd, når paginatoren er i en bestemt tilstand. For eksempel, når den første 1️⃣ eller sidste 🏁 side er valgt, kan du måske ønske at gøre noget med knapperne “gå til første”, “gå til forrige side” eller “gå til sidste”, “gå til næste side” 🔘. Du kan enten deaktivere elementerne, skjule dem eller anvende en given CSS-klasse. Tænk bare på antallet af input-egenskaber, der er ansvarlige for konfigurationen, hvis paginatoren var implementeret som komponent 🔥 😱.
Lad os tage et kig på dele af direktivets kode, før jeg præsenterer hele implementeringen 😏
Direktivet injicerer to services for at interagere med det underliggende DOM-element. Desuden er det eksporteret, så man kan få adgang til en instans i en skabelon.
Det har setValue-metoden, som er ansvarlig for at indstille det underliggende inputelementets værdi, og setPage-metoden, som udfører handlinger, når den valgte side er ændret.
Direktivet udsætter offentlige metoder til direkte imperativ navigation til en ønsket side ✈️.
Det har desuden to offentlige getters, der angiver visse paginatortilstande.
Når inputbegivenheden udløses, sørger direktivet for at fjerne ugyldige tegn 🚫.
Når ændringsbegivenheden udløses, kontrolleres inputelementets aktuelle værdi og ændres om nødvendigt (tom værdi eller værdi uden for intervallet). Dernæst udløses direktivets pageChange-hændelse.
Sidst, men ikke mindst, håndteres ændringer af input-egenskaber under hensyntagen til ugyldige værdier.
Direktivernes samlede kode er som følger: