Implementatie
Het idee is om een gemakkelijke manier om de pagination logica die in Angular toepassing betekent inkapselen van de logica in een richtlijn of het creëren van een component die Template Refs accepteert met aangepaste UI widgets te bieden. Als je niet bekend bent met Template Refs, moedig ik je ten zeerste aan om een van mijn eerdere posts ▶️ hier te bekijken.Ik besloot om een directive te maken, omdat het aantal UI-elementen dat kan worden aangepast niet klein is (maximaal 5 items) en je misschien een ander gedrag wilt wanneer de paginator zich in een bepaalde staat bevindt. Bijvoorbeeld, wanneer de eerste 1️⃣ of laatste 🏁 pagina is geselecteerd, wil je misschien iets doen met ‘ga naar eerste’, ‘ga naar vorige pagina’ of ‘ga naar laatste’, ‘ga naar volgende pagina’ knoppen 🔘. U kunt de elementen uitschakelen, ze verbergen of een bepaalde CSS-klasse toepassen. Denk eens aan het aantal invoereigenschappen dat verantwoordelijk is voor de configuratie als de paginator zou zijn geïmplementeerd als component 🔥 😱.
Laten we eerst eens kijken naar delen van de code van de directive voordat ik de hele implementatie zal presenteren 😏
De directive injecteert twee services om te kunnen communiceren met het onderliggende DOM-element. Bovendien wordt hij geëxporteerd, zodat u toegang kunt krijgen tot een instantie in een sjabloon.
Hij heeft de setValue-methode die verantwoordelijk is voor het instellen van de waarde van het onderliggende invoerelement en de setPage-methode die acties uitvoert wanneer de geselecteerde pagina is gewijzigd.
De richtlijn stelt publieke methoden bloot voor directe imperatieve navigatie naar een gewenste pagina ✈️.
Daarnaast heeft het twee publieke getters die bepaalde toestanden van de paginator aangeven.
Wanneer de input event vuurt, zorgt de directive ervoor dat ongeldige tekens worden verwijderd 🚫.
Wanneer de change event vuurt, wordt de huidige waarde van het input-element gecontroleerd en zo nodig gewijzigd (lege of buiten bereik vallende waarde). Vervolgens wordt de gebeurtenis pageChange van de directive geactiveerd.
Ten slotte worden wijzigingen in invoereigenschappen verwerkt, waarbij rekening wordt gehouden met ongeldige waarden.
De volledige code van de directives ziet er als volgt uit: