Implementace
Záměrem je poskytnout snadný způsob opakovaného použití logiky stránkování, což v aplikaci Angular znamená zapouzdření logiky do směrnice nebo vytvoření komponenty, která přijímá odkazy na šablonu s vlastními widgety uživatelského rozhraní. Pokud nejste obeznámeni s Template Refs, vřele vám doporučuji podívat se na jeden z mých předchozích příspěvků ▶️ zde. rozhodl jsem se vytvořit direktivu, protože počet prvků uživatelského rozhraní, které lze přizpůsobit, není malý (do 5 položek) a můžete chtít jiné chování, když je stránkovač v určitém stavu. Například když je vybrána první 1️⃣ nebo poslední 🏁 stránka, můžete chtít udělat něco s tlačítky „přejít na první“, „přejít na předchozí stránku“ nebo „přejít na poslední“, „přejít na další stránku“ 🔘. Tyto prvky můžete buď zakázat, skrýt, nebo na ně použít danou třídu CSS. Jen si představte počet vstupních vlastností zodpovědných za konfiguraci, kdyby byl stránkovač implementován jako komponenta 🔥 😱.
Nejprve se podíváme na části kódu směrnice, než představím celou implementaci 😏
Směrnice injektuje dvě služby, aby mohla komunikovat se základním prvkem DOM. Navíc je exportovaná, takže k její instanci můžete přistupovat v šabloně.
Má metodu setValue, která je zodpovědná za nastavení hodnoty podkladového vstupního prvku, a metodu setPage, která provádí akce při změně vybrané stránky.
Směrnice vystavuje veřejné metody pro přímou imperativní navigaci na požadovanou stránku ✈️.
Kromě toho má dva veřejné gettery, které indikují určité stavy paginátoru.
Při vyvolání události input se směrnice postará o odstranění neplatných znaků 🚫.
Při vyvolání události change se zkontroluje aktuální hodnota vstupního prvku a případně se změní (prázdná hodnota nebo hodnota mimo rozsah). Dále je vyvolána událost pageChange směrnice.
V neposlední řadě jsou zpracovány změny vstupních vlastností s ohledem na neplatné hodnoty.
Celý kód směrnice je následující:
.