Stránkovač Angularu implementovaný od nuly

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í:

.

Napsat komentář