Come aggiungere lo scorrimento infinito alla tua app Angular

Per iniziare a costruire l’app, iniziamo installando la CLI Angular eseguendo npm i @angular/cli. Dopo averla installata, eseguiamo ng new image-gallery per creare un nuovo Angular per la nostra app galleria di immagini. Inoltre creiamo un negozio Flux per memorizzare lo stato del menu.

Poi installiamo le librerie per l’app. Eseguiamo npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store per installare le librerie di cui abbiamo bisogno per visualizzare le foto e mostrare la presentazione delle foto. Poi eseguiamo ng add @ngrx/store per aggiungere il codice.

Poi aggiungiamo il codice skeleton per il codice che scriveremo. Eseguiamo i seguenti comandi per fare questo:

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

Questo creerà i componenti usati per la visualizzazione. La classe httpReqInterceptor è usata per allegare la chiave API all’intestazione della richiesta di ogni richiesta. Photo service è dove risiederà il codice per effettuare le chiamate all’API di Pexels.

In environment.ts, abbiamo messo per permetterci di importare la chiave API in altri file.

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

In http-req-interceptor.ts, aggiungiamo:

Questo attacca il nostro token all’intestazione Authorization di ogni richiesta con questo blocco:

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

In photo.service.ts, mettiamo:

Questo ci permette di fare le richieste all’API Pexels. Abbiamo usato le foto curate e l’endpoint di ricerca con paginazione nella nostra app.

Poi in home-page.component.ts, mettiamo:

Qui è dove prendiamo le foto dall’endpoint delle foto curate, situato qui, per ottenere gli URL delle immagini chiamando map sul campo foto della risposta.

Se viene inserito un termine di ricerca, useremo l’endpoint delle foto di ricerca qui e faremo la stessa cosa con la funzione map. Abbiamo uno scorrimento infinito, quindi quando l’utente scorre fino al fondo della pagina, aumentiamo il numero di pagina e continuiamo ad aggiungere altri URL di immagini al nostro array.

In home-page.component.html, mettiamo:

Questo mostra il modulo di ricerca e avvolge la nostra griglia di foto in uno scorrimento infinito div in modo da caricare nuove immagini quando l’utente scorre in basso.

infiniteScrollDistance è la percentuale della posizione della pagina dal fondo della pagina, quindi 2 significa che lo scorrimento infinito verrà attivato quando avremo fatto scorrere il 98% del contenuto corrente della pagina.

infiniteScrollThrottle è il numero di millisecondi fino a quando lo scorrimento infinito viene attivato dopo che l’utente smette di scorrere. Il scrolled è innescato quando l’utente scorre la pagina verso il basso. Questi sono tutti opzionali e possono essere regolati come volete.

In home-page.component.scss, aggiungiamo:

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

Questo fa sì che le immagini riempiano la griglia.

In random-slideshow-page.component.ts, mettiamo:

Ecco dove prendiamo le foto casuali dall’endpoint delle foto curate.

In random-photos-page.component.html, aggiungiamo:

Questo mostra la presentazione delle foto.

Poi facciamo un file chiamato menu-reducer.ts e aggiungiamo quanto segue per memorizzare lo stato del menu:

In reducers/index.ts, mettiamo:

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

Questo permette al StoreModule di @ngrx/store di utilizzare il riduttore di menu per memorizzare lo stato.

In app.component.ts, aggiungiamo:

Questo chiude automaticamente il menu di sinistra quando si cambia pagina e se non si clicca sul pulsante del menu. Otteniamo lo stato del menu nel negozio, e se il menu deve chiudersi per navigazione o cliccando fuori dal menu, disattiviamo il menu e impostiamo lo stato nel negozio.

In top-bar.component.ts, mettiamo:

Questo ci permette di attivare il menu e memorizzare lo stato nel negozio.

In app.component.html, abbiamo:

Questo mostra il menu laterale sinistro per la navigazione, e router-outlet permette agli utenti di vedere le nostre pagine quando si clicca sui link sopra o si digita direttamente l’URL.

In app.component.scss, aggiungiamo:

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

Questo aggiunge un po’ di padding e toglie i margini alle pagine.

Infine in app.module.ts, mettiamo:

Questo include tutte le librerie, l’intercettore HTTP e i servizi di cui abbiamo bisogno per far funzionare l’applicazione.

Finalmente abbiamo quanto segue nell’app finita: