Implementazione
L’idea è quella di fornire un modo semplice per riutilizzare la logica di paginazione che nell’applicazione Angular significa incapsulare la logica in una direttiva o creare un componente che accetta Template Refs con widget UI personalizzati. Se non hai familiarità con i Template Refs, ti incoraggio vivamente a dare un’occhiata a uno dei miei post precedenti ▶️ qui.Ho deciso di creare una direttiva, poiché il numero di elementi UI che possono essere personalizzati non è piccolo (fino a 5 elementi) e si può desiderare un comportamento diverso quando il paginatore è in un certo stato. Per esempio, quando viene selezionata la prima 1️⃣ o l’ultima 🏁 pagina, potresti voler fare qualcosa con i pulsanti ‘vai alla prima’, ‘vai alla pagina precedente’ o ‘vai all’ultima’, ‘vai alla pagina successiva’ 🔘. Puoi disabilitare gli elementi, nasconderli o applicare una determinata classe CSS. Pensate al numero di proprietà di input responsabili della configurazione se il paginatore fosse implementato come componente 🔥 😱.
Diamo un’occhiata a parti del codice della direttiva prima di presentare l’intera implementazione 😏
La direttiva inietta due servizi per interagire con l’elemento DOM sottostante. Inoltre, è esportata, in modo da poter accedere a un’istanza in un template.
Ha il metodo setValue che è responsabile dell’impostazione del valore dell’elemento di input sottostante e il metodo setPage che esegue azioni quando la pagina selezionata è cambiata.
La direttiva espone metodi pubblici per una navigazione imperativa diretta a una pagina desiderata ✈️.
Inoltre, ha due getter pubblici che indicano alcuni stati del paginatore.
Quando scatta l’evento input, la direttiva si occupa di rimuovere i caratteri non validi 🚫.
Quando scatta l’evento change, viene controllato il valore corrente dell’elemento input e modificato se necessario (valore vuoto o fuori range). Successivamente, l’evento pageChange della direttiva viene attivato.
Infine, ma non meno importante, i cambiamenti delle proprietà di input sono gestiti tenendo conto dei valori non validi.
L’intero codice delle direttive è il seguente: