Angular Search & Pagination

Komponent paginacji

W naszym komponencie paginacji musimy zrobić dwie główne rzeczy: wyświetlić wszystkie możliwe numery stron do wyboru przez użytkownika i wykryć, kiedy strona się zmieniła, aby pobrać dane z wybranej strony.

Po pierwsze, dodamy do naszego komponentu właściwość Input, aby otrzymać informacje, których potrzebujemy do stworzenia paginacji: rozmiar stron oraz całkowitą ilość elementów.

Zauważysz, że zamiast bezpośredniej właściwości input, użyłem settera, aby przechwycić otrzymaną właściwość input. Stało się tak z dwóch powodów: aby zaokrąglić pagesAmount (w przypadku, gdy z jakiegoś powodu nie było to zrobione wcześniej), a także aby wypełnić tablicę liczb z pagesAmount.

Ok, więc dlaczego potrzebujemy tablicy liczb? Po to, żeby wyrenderować użytkownikowi wszystkie możliwe strony. W Angular nie możemy bezpośrednio wziąć liczby i poprosić o pętlę *ngFor określoną ilość razy, więc jest to jedna strategia, której zwykle używam, aby to przezwyciężyć.

To, co robimy, to: używając tablicy liczb, możemy zapętlić się przez nią i użyć indeksu, aby pobrać numer, który chcemy. Ponieważ to czego chcemy to zwykła uporządkowana lista liczb, jest to proste do osiągnięcia, jak pokazano w poniższym znaczniku.

<span
*ngFor="let page of pagesArray; let index = index"
="{ 'active': currentPage === index + 1 } 
(click)="setPage(index + 1)"
>
{{ index + 1 }}
</span>

W tym znaczniku renderujemy wszystkie możliwe strony do wyboru przez użytkownika. Dodaliśmy ngClass, aby ustawić styl na aktualnie wybranej stronie, aby użytkownik wiedział, na której stronie aktualnie się znajduje. Dodaliśmy także akcję kliknięcia, która będzie emitować zdarzenie informujące komponent nadrzędny, że wybrana strona uległa zmianie.

Teraz dodajmy także dwie strzałki, aby ułatwić życie naszym użytkownikom; jedna do cofnięcia się o jedną stronę, a druga do przejścia o jedną stronę do przodu. Jednakże, zamierzamy ukryć lewą strzałkę, gdy jesteśmy aktualnie na pierwszej stronie i ukryć prawą strzałkę, gdy jesteśmy aktualnie na ostatniej stronie.

Ale nadal mamy jeden problem! Co jeśli nasze itemsAmount są setki, a nasz pageSize jest mały? Albo nawet tysiące elementów? Wyrenderowalibyśmy wszystkie strony na raz i mielibyśmy dość kiepską użyteczność z tymi wszystkimi liczbami po prostu tam wiszącymi.

Istnieją pewne możliwe rozwiązania tego problemu, takie jak ukrywanie środkowych stron lub ukrywanie ostatnich stron po określonej liczbie. To, które zamierzam pokazać jest proste do osiągnięcia i wierzę, że może być interesujące w niektórych przypadkach; to zmiana numerów z po prostu drukowanych na użycie elementu select html z każdą stroną jako opcją.

Więc, wracając do naszego znacznika, dodamy następujące zmiany do części, w której renderujemy nasze numery stron:

Kod końcowy

Więc, składając wszystkie nasze kawałki razem, byłby to końcowy kod dla prostego, ale wydajnego komponentu paginacji. Otrzymuje on dane wejściowe zawierające rozmiar strony oraz całkowitą ilość elementów i pozwala użytkownikowi wybrać stronę, którą chce wyświetlić, wyzwalając zdarzenie wskazujące wybraną stronę w celu obsługi wymaganej logiki/żądań paginacji.

.