How To Add Infinite Scrolling to Your Angular App

Aloittaaksemme sovelluksen rakentamisen, aloitamme asentamalla Angular CLI:n ajamalla npm i @angular/cli. Kun olemme asentaneet sen, suoritamme ng new image-gallery luodaksemme uuden Angularin kuvagalleriasovelluksellemme. Luomme myös Flux-varaston valikon tilan tallentamista varten.

Seuraavaksi asennamme sovelluksen kirjastot. Ajamme npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store asentaaksemme kirjastot, joita tarvitsemme kuvien näyttämiseen ja valokuvien diaesityksen näyttämiseen. Sitten ajamme ng add @ngrx/store lisätäksemme koodin.

Seuraavaksi lisäämme luurankokoodin kirjoittamaamme koodia varten. Tätä varten suoritamme seuraavat komennot:

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

Tämä luo näyttämiseen käytettävät komponentit. httpReqInterceptor-luokkaa käytetään API-avaimen liittämiseen jokaisen pyynnön pyyntöotsikkoon. Photo service -luokkaan sijoitetaan koodi, jolla tehdään kutsuja Pexelsin API:lle.

Kohtaan environment.ts laitetaan, jotta voimme tuoda API-avaimen muihin tiedostoihin.:

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

Kohdassa http-req-interceptor.ts lisäämme:

Tämä liittää tunnuksemme jokaisen pyynnön Authorization pyyntöotsikkoon tällä lohkolla:

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

Kohdassa photo.service.ts laitamme:

Tämän avulla voimme tehdä pyynnöt Pexelsin API:lle. Käytimme sovelluksessamme kuratoituja kuvia ja haku-päätepistettä paginoinnilla.

Seuraavaan kohtaan home-page.component.ts laitamme:

Tänään saamme kuvat kuratoitujen kuvien päätepisteestä, joka sijaitsee tässä, saadaksemme kuvien URL-osoitteet kutsumalla map:aa vastauksen photos-kenttään.

Jos hakusana syötetään, käytämme hakukuvat-päätepistettä tässä, ja suoritamme saman asian map-funktiolla. Meillä on ääretön vieritys, joten kun käyttäjä vierittää sivun alareunaan, kasvatamme sivunumeroa ja lisäämme jatkuvasti lisää kuva-URL:eja kenttäämme.

Kenttään home-page.component.html laitamme:

Tämä näyttää hakulomakkeen ja kietoo valokuva-ruudukkomme äärettömään vierityskenttään div, jotta se lataa uusia kuvia, kun käyttäjä vierittää alaspäin.

infiniteScrollDistance on sivun sijainnin prosenttiosuus sivun alareunasta, joten 2 tarkoittaa, että ääretön vieritys käynnistyy, kun olemme vierittäneet 98 % sivun nykyisestä sisällöstä.

infiniteScrollThrottle on millisekuntien määrä siihen asti, kunnes ääretön vieritys käynnistyy sen jälkeen, kun käyttäjä lopettaa vierityksen. scrolled käynnistyy, kun käyttäjä vierittää sivua alaspäin. Nämä kaikki ovat valinnaisia ja niitä voi säätää haluamallaan tavalla.

Kohdassa home-page.component.scss lisätään:

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

Tämä saa kuvat täyttämään ruudukkolaatikon.

Kohdassa random-slideshow-page.component.ts laitamme:

Tässä saamme satunnaiset kuvat kuratoitujen kuvien päätepisteestä.

Kohdassa random-photos-page.component.html lisäämme:

Tässä näytetään kuvien diaesitys.

In app.component.ts lisäämme:

Tämä sulkee vasemmanpuoleisen valikon automaattisesti, kun vaihdetaan sivuja ja jos ei klikata valikkopainiketta. Saamme valikon tilan myymälään, ja jos valikko on suljettava navigoinnin tai valikon ulkopuolella tapahtuvan klikkauksen vuoksi, kytkemme valikon pois päältä ja asetamme tilan myymälään.

Sisään top-bar.component.ts, laitamme:

Tämän avulla voimme kytkeä valikon pois päältä ja tallentaa tilan myymälään.

In app.component.html laitamme:

Tämän avulla näytetään vasemmanpuoleinen valikko navigointia varten, ja router-outlet avulla käyttäjät näkevät sivumme, kun he napsauttavat yllä olevia linkkejä tai kirjoittavat URL-osoitteen suoraan.

In app.component.scss lisäämme:

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

Tämän avulla lisäämme pehmusteita ja poistamme sivujen marginaalit.

Viimeiseksi kohtaan app.module.ts laitamme:

Tämä sisältää kaikki kirjastot, HTTP-siepparin ja palvelut, joita tarvitsemme, jotta sovellus toimii.

Viimein meillä on valmiissa sovelluksessa seuraavat: