Toteutus
Ajatuksena on tarjota helppo tapa uudelleenkäyttää paginointilogiikkaa, mikä Angular-sovelluksessa tarkoittaa logiikan kapselointia direktiiviin tai sellaisen komponentin luomista, joka hyväksyy Template Refit mukautetuilla UI-vidgeteillä. Jos Template Refit eivät ole sinulle tuttuja, suosittelen sinua vilkaisemaan yhtä aiemmista viesteistäni ▶️ täällä.Päätin luoda direktiivin, koska mukautettavien UI-elementtien määrä ei ole pieni (enintään 5 kohdetta) ja saatat haluta erilaista käyttäytymistä, kun paginaattori on tietyssä tilassa. Esimerkiksi kun ensimmäinen 1️⃣ tai viimeinen 🏁 sivu on valittu, saatat haluta tehdä jotain ’siirry ensimmäiselle’, ’siirry edelliselle sivulle’ tai ’siirry viimeiselle’, ’siirry seuraavalle sivulle’ painikkeille 🔘. Voit joko poistaa elementit käytöstä, piilottaa ne tai soveltaa tiettyä CSS-luokkaa. Ajattele vain, kuinka paljon konfiguroinnista vastaavia syöttöominaisuuksia olisi, jos paginator olisi toteutettu komponenttina 🔥 😱.
Katsotaanpa osia direktiivin koodista, ennen kuin esittelen koko toteutuksen 😏
Direktiivi injektoi kaksi palvelua ollakseen vuorovaikutuksessa taustalla olevan DOM-elementin kanssa. Lisäksi se on viety, jotta instanssia voi käyttää mallissa.
Se sisältää setValue-metodin, joka vastaa taustalla olevan syöttöelementin arvon asettamisesta, ja setPage-metodin, joka suorittaa toimenpiteitä, kun valittu sivu on muuttunut.
Direktiivi paljastaa julkiset metodit, joiden avulla voidaan navigoida suoraan imperatiivisesti halutulle sivulle ✈️.
Lisäksi sillä on kaksi julkista getteriä, jotka ilmaisevat tietyt sivulaitteen tilat.
Kun input-tapahtuma laukeaa, direktiivi huolehtii epäkelvojen merkkien poistamisesta 🚫.
Kun change-tapahtuma laukeaa, input-elementin senhetkinen arvo tarkistetaan ja sitä muokataan tarvittaessa (tyhjä tai vaihteluvälin ulkopuolinen arvo). Seuraavaksi direktiivin pageChange-tapahtuma laukaistaan.
Viimeiseksi, mutta ei vähäisimpänä, input-ominaisuuksien muutokset käsitellään ottaen huomioon virheelliset arvot.
Direktiivien koko koodi on seuraava: