Jak přidat nekonečné rolování do aplikace Angular
Pro zahájení tvorby aplikace začneme instalací Angular CLI spuštěním npm i @angular/cli. Po jeho instalaci spustíme příkaz ng new image-gallery a vytvoříme novou aplikaci Angular pro naši aplikaci galerie obrázků. Také vytvoříme úložiště Flux pro uložení stavu nabídky.
Dále nainstalujeme knihovny pro aplikaci. Spustíme npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store, abychom nainstalovali knihovny, které potřebujeme k zobrazení fotografií a zobrazení prezentace fotografií. Poté spustíme ng add @ngrx/store, abychom přidali kód.
Dále přidáme kostru kódu pro kód, který budeme psát. K tomu spustíme následující příkazy:
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
Tím vytvoříme komponenty používané pro zobrazování. Třída httpReqInterceptor slouží k připojení klíče API k hlavičce každého požadavku. Photo service je místo, kde se bude nacházet kód pro provádění volání API Pexels.
V environment.ts vložíme, abychom mohli importovat klíč API do dalších souborů.:
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
V http-req-interceptor.ts, přidáme:
Tímto blokem připojíme náš token k hlavičce Authorization požadavku každého požadavku:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
V photo.service.ts, vložíme:
To nám umožní provádět požadavky na Pexels API. V naší aplikaci jsme použili koncové body curated photos a search se stránkováním.
Dále do home-page.component.ts vložíme:
Tady získáme fotografie z koncového bodu curated photos, který se nachází zde, abychom získali adresy URL obrázků voláním map na poli photos v odpovědi.
Pokud je zadán hledaný výraz, použijeme zde koncový bod search photos a provedeme totéž pomocí funkce map. Máme nekonečné rolování, takže když uživatel sroluje až na konec stránky, zvýšíme číslo stránky a budeme stále přidávat další adresy URL obrázků do našeho pole.
Do home-page.component.html vložíme:
Tímto zobrazíme vyhledávací formulář a zabalíme naši mřížku fotografií do nekonečného rolování div, takže se budou načítat nové obrázky, když uživatel sroluje dolů.
infiniteScrollDistance je procento pozice stránky od spodního okraje stránky, takže 2 znamená, že nekonečné posouvání se spustí, až projdeme 98 % aktuálního obsahu stránky.
infiniteScrollThrottle je počet milisekund, než se spustí nekonečné posouvání poté, co uživatel přestane posouvat. Hodnota scrolled je spuštěna, když uživatel prochází stránkou dolů. Všechny tyto údaje jsou nepovinné a můžete je nastavit podle svých představ.
V položce home-page.component.scss přidáme:
.tile-image {
width: 100%;
height: auto;
}
Tímto způsobem obrázky vyplní pole mřížky.
Do random-slideshow-page.component.ts vložíme:
Tímto získáme náhodné fotografie z koncového bodu kurátorských fotografií.
Do random-photos-page.component.html přidáme:
Tím se zobrazí slideshow fotografií.
Dále vytvoříme soubor s názvem menu-reducer.ts a přidáme následující pro uložení stavu nabídky:
Do reducers/index.ts vložíme:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
To umožní StoreModule z @ngrx/store použít reduktor nabídky pro uložení stavu.
Do app.component.ts přidáme:
To automaticky zavře levou boční nabídku při změně stránek a pokud nekliknete na tlačítko nabídky. Stav menu získáme v úložišti, a pokud je třeba menu zavřít navigací nebo kliknutím mimo menu, vypneme menu a nastavíme stav v úložišti.
V top-bar.component.ts vložíme:
To nám umožní přepnout menu a uložit stav v úložišti.
Vložíme do app.component.html:
To zobrazuje levou boční nabídku pro navigaci a router-outlet umožňuje uživatelům zobrazit naše stránky při kliknutí na odkazy výše nebo při přímém zadání adresy URL.
Vložíme do app.component.scss:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
To přidá trochu paddingu a odstraní okraje na stránkách.
Nakonec do app.module.ts vložíme:
To obsahuje všechny knihovny, HTTP interceptor a služby, které potřebujeme k fungování aplikace.
Nakonec máme v hotové aplikaci následující:
