Implementierung
Die Idee ist es, eine einfache Möglichkeit zu bieten, die Paginierungslogik wiederzuverwenden, was in Angular-Anwendungen bedeutet, die Logik in einer Direktive zu kapseln oder eine Komponente zu erstellen, die Template Refs mit benutzerdefinierten UI-Widgets akzeptiert. Ich habe mich entschieden, eine Direktive zu erstellen, da die Anzahl der UI-Elemente, die angepasst werden können, nicht klein ist (bis zu 5 Elemente) und man ein anderes Verhalten haben möchte, wenn sich der Paginator in einem bestimmten Zustand befindet. Wenn zum Beispiel die erste 1️⃣ oder die letzte 🏁 Seite ausgewählt ist, möchten Sie vielleicht etwas mit den Schaltflächen „Gehe zur ersten“, „Gehe zur vorherigen Seite“ oder „Gehe zur letzten“, „Gehe zur nächsten Seite“ machen 🔘. Sie können die Elemente entweder deaktivieren, ausblenden oder eine bestimmte CSS-Klasse anwenden. Man denke nur an die Anzahl der Eingabeeigenschaften, die für die Konfiguration verantwortlich sind, wenn der Paginator als Komponente 🔥 😱 implementiert wäre.
Werfen wir einen Blick auf Teile des Codes der Richtlinie, bevor ich die gesamte Implementierung vorstelle 😏
Die Richtlinie injiziert zwei Dienste, um mit dem zugrunde liegenden DOM-Element zu interagieren. Außerdem wird sie exportiert, so dass man auf eine Instanz in einer Vorlage zugreifen kann.
Sie verfügt über die setValue-Methode, die für das Setzen des Wertes des zugrunde liegenden Eingabeelements verantwortlich ist, und die setPage-Methode, die Aktionen ausführt, wenn sich die ausgewählte Seite geändert hat.
Die Direktive stellt öffentliche Methoden für die direkte imperative Navigation zu einer gewünschten Seite zur Verfügung ✈️.
Darüber hinaus verfügt sie über zwei öffentliche Getter, die bestimmte Zustände des Paginators anzeigen.
Wenn das input-Ereignis auslöst, kümmert sich die Direktive um das Entfernen ungültiger Zeichen 🚫.
Wenn das change-Ereignis auslöst, wird der aktuelle Wert des input-Elements geprüft und bei Bedarf geändert (leerer Wert oder Wert außerhalb des Bereichs). Anschließend wird das pageChange-Ereignis der Direktive ausgelöst.
Zu guter Letzt werden Änderungen der Eingabeeigenschaften unter Berücksichtigung ungültiger Werte behandelt.
Der gesamte Code der Direktive lautet wie folgt: