How To Add Infinite Scrolling to Your Angular App

Aby rozpocząć budowanie aplikacji, zaczynamy od zainstalowania Angular CLI poprzez uruchomienie npm i @angular/cli. Po zainstalowaniu go, uruchamiamy ng new image-gallery, aby utworzyć nowy Angular dla naszej aplikacji galerii obrazów. Tworzymy również Flux store do przechowywania stanu menu.

Następnie instalujemy biblioteki dla aplikacji. Uruchamiamy npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store aby zainstalować biblioteki, których potrzebujemy do wyświetlania zdjęć i pokazu slajdów. Następnie uruchamiamy ng add @ngrx/store, aby dodać kod.

Następnie dodajemy kod szkieletowy dla kodu, który będziemy pisać. W tym celu uruchamiamy następujące polecenia:

ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo

Tworzymy w ten sposób komponenty używane do wyświetlania. Klasa httpReqInterceptor służy do dołączania klucza API do nagłówka każdego żądania. Photo service to miejsce, w którym będzie rezydował kod do wykonywania wywołań do API Pexels.

W environment.ts umieszczamy, aby umożliwić nam importowanie klucza API do innych plików.W

export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};

W http-req-interceptor.ts dodajemy:

To dołącza nasz token do nagłówka żądania Authorization każdego żądania z tym blokiem:

let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});

W photo.service.ts umieszczamy:

To pozwala nam wykonywać żądania do API Pexels. Użyliśmy punktów końcowych curated photos i search z paginacją w naszej aplikacji.

Następnie w home-page.component.ts umieszczamy:

To tutaj pobieramy zdjęcia z punktu końcowego curated photos, znajdującego się tutaj, aby uzyskać adresy URL obrazów przez wywołanie map w polu photos w odpowiedzi.

Jeśli zostanie wprowadzone hasło wyszukiwania, użyjemy tutaj punktu końcowego search photos i zrobimy to samo z funkcją map. Mamy nieskończone przewijanie, więc gdy użytkownik przewinie stronę do dołu, zwiększymy numer strony i będziemy dodawać kolejne adresy URL obrazów do naszej tablicy.

W home-page.component.html umieścimy:

To pokazuje formularz wyszukiwania i zawija naszą siatkę zdjęć w nieskończonym przewijaniu div, więc będzie ładować nowe obrazy, gdy użytkownik będzie przewijać w dół.

infiniteScrollDistance jest procentem pozycji strony od dołu strony, więc 2 oznacza, że nieskończone przewijanie zostanie uruchomione, gdy przewiniemy 98% aktualnej zawartości strony.

infiniteScrollThrottle jest liczbą milisekund do momentu, gdy nieskończone przewijanie zostanie uruchomione po zatrzymaniu przewijania przez użytkownika. Wartość scrolled jest wyzwalana, gdy użytkownik przewija stronę w dół. Wszystkie te elementy są opcjonalne i można je dostosować w dowolny sposób.

W home-page.component.scss, dodajemy:

.tile-image {
width: 100%;
height: auto;
}

To sprawia, że obrazy wypełniają pole siatki.

W random-slideshow-page.component.ts, umieszczamy:

Tutaj pobieramy losowe zdjęcia z punktu końcowego curated photos.

W random-photos-page.component.html, dodajemy:

To pokazuje pokaz slajdów zdjęć.

Następnie tworzymy plik o nazwie menu-reducer.ts i dodajemy następujące elementy do przechowywania stanu menu:

W reducers/index.ts umieszczamy:

import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};

To pozwala StoreModule z @ngrx/store używać reduktora menu do przechowywania stanu.

W app.component.ts dodajemy:

To automatycznie zamyka lewe menu podczas zmiany stron i jeśli użytkownik nie klika na przycisk menu. Otrzymujemy stan menu w sklepie, a jeśli menu musi się zamknąć przez nawigację lub kliknięcie poza menu, wyłączamy menu i ustawiamy stan w sklepie.

W top-bar.component.ts umieszczamy:

To pozwala nam na przełączanie menu i przechowywanie stanu w sklepie.

W app.component.html, mamy:

To pokazuje menu po lewej stronie do nawigacji, a router-outlet pozwala użytkownikom zobaczyć nasze strony, gdy klikają na linki powyżej lub wpisują URL bezpośrednio.

W app.component.scss, dodajemy:

#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}

To dodaje trochę paddingu i usuwa marginesy na stronach.

Na koniec w app.module.ts umieszczamy:

To zawiera wszystkie biblioteki, przechwytywacz HTTP i usługi, których potrzebujemy, aby aplikacja działała.

W końcu mamy następujące elementy w gotowej aplikacji: