How To Add Infinite Scrolling to Your Angular App

Az alkalmazás építésének megkezdéséhez először telepítjük az Angular CLI-t a npm i @angular/cli futtatásával. Miután telepítettük, futtassuk a ng new image-gallery-t, hogy létrehozzunk egy új Angular-t a képgaléria alkalmazásunkhoz. Továbbá létrehozunk egy Flux tárolót a menü állapotának tárolására.

A következőkben telepítjük az alkalmazáshoz szükséges könyvtárakat. Lefuttatjuk a npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store, hogy telepítsük a könyvtárakat, amelyekre szükségünk van a fényképek megjelenítéséhez és a fotó diavetítés megjelenítéséhez. Ezután futtatjuk a ng add @ngrx/store parancsot a kód hozzáadásához.

A következő lépés a vázkód hozzáadása az általunk megírandó kódhoz. Ehhez a következő parancsokat futtatjuk:

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

Ezzel létrehozzuk a megjelenítéshez használt komponenseket. A httpReqInterceptor osztályt arra használjuk, hogy az API kulcsot minden egyes kérés kérésfejlécéhez csatoljuk. A Photo service az a hely, ahol a Pexels API hívásainak végrehajtásához szükséges kód lesz.

A environment.ts-be azt tesszük, hogy az API-kulcsot más fájlokba importálhassuk.:

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

A http-req-interceptor.ts-be beillesztjük:

Ezzel a tokenünket csatoljuk a Authorization kérés fejlécéhez minden egyes kérésnél ezzel a blokkal:

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

A photo.service.ts-be beillesztjük:

Ezzel tudjuk a Pexels API-hoz intézni a kéréseket. Alkalmazásunkban a kuratált fotók és a keresés végpontját használtuk paginálással.

A következő home-page.component.ts-be tesszük:

Ez az a hely, ahol az itt található kuratált fotók végpontról megkapjuk a fotókat, hogy a válasz fotók mezőjén a map meghívásával megkapjuk a kép URL-eket.

Ha egy kereső kifejezést adunk meg, akkor itt a keresés fotók végpontját használjuk, és ugyanezt a map függvénnyel végezzük el. Végtelen görgetésünk van, így amikor a felhasználó az oldal aljára görget, növeljük az oldalszámot, és folyamatosan újabb kép-URL-eket adunk a tömbünkhöz.

A home-page.component.html-be a következőt tesszük:

Ez mutatja a kereső űrlapot, és a fotórácsunkat egy végtelen görgető div-be csomagolja, így új képeket tölt be, amikor a felhasználó lefelé görget.

infiniteScrollDistance az oldal pozíciójának százalékos aránya az oldal aljától, így 2 azt jelenti, hogy a végtelen görgetés akkor fog elindulni, amikor az oldal aktuális tartalmának 98%-át végiggörgetjük.

infiniteScrollThrottle a milliszekundumok száma, amíg a végtelen görgetés elindul, miután a felhasználó abbahagyja a görgetést. A scrolled akkor lép működésbe, amikor a felhasználó lefelé görget az oldalon. Ezek mind opcionálisak, és tetszés szerint beállíthatók.

A home-page.component.scss-ben hozzáadjuk:

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

Ezzel a képek kitöltik a rácsdobozt.

A random-slideshow-page.component.ts-be tesszük:

Ez az, ahová a véletlenszerű képeket kapjuk a kurátori fotók végpontjáról.

A random-photos-page.component.html-ba hozzáadjuk:

Ez mutatja a képek diavetítését.

Ezután készítünk egy menu-reducer.ts nevű fájlt, és a következőket adjuk hozzá a menü állapotának tárolásához:

A reducers/index.ts-be tesszük:

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

Ez lehetővé teszi, hogy a @ngrx/store StoreModule a menü reduktorát használja az állapot tárolására.

A app.component.ts-be beillesztjük:

Ez automatikusan bezárja a bal oldali menüt oldalváltáskor és ha nem kattintunk a menü gombra. A menü állapotát a tárolóban kapjuk meg, és ha a menüt navigációval vagy a menün kívülre kattintva be kell zárni, akkor kikapcsoljuk a menüt, és az állapotot a tárolóban állítjuk be.

A top-bar.component.ts-ban elhelyezzük:

Ez lehetővé teszi a menü kikapcsolását és az állapot tárolását a tárolóban.

A app.component.html-ben van:

Ez mutatja a bal oldali menüt a navigációhoz, és a router-outlet segítségével a felhasználók láthatják az oldalainkat, ha a fenti linkekre kattintanak vagy közvetlenül beírják az URL-t.

A app.component.scss-ben van:

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

Ez némi kitöltést ad és eltávolítja a margókat az oldalakon.

Végül a app.module.ts-ben elhelyezzük:

Ez tartalmazza az összes könyvtárat, a HTTP interceptort és a szolgáltatásokat, amelyekre szükségünk van az alkalmazás működéséhez.

A kész alkalmazásban végül a következőket találjuk: