Cum să adăugați defilare infinită la aplicația dvs. Angular
Pentru a începe să construim aplicația, începem prin a instala Angular CLI rulând npm i @angular/cli. După ce am instalat-o, executăm ng new image-gallery pentru a crea un nou Angular pentru aplicația noastră de galerie de imagini. De asemenea, creăm un magazin Flux pentru a stoca starea meniului.
În continuare, instalăm bibliotecile pentru aplicație. Executăm npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store pentru a instala bibliotecile de care avem nevoie pentru a afișa fotografiile și pentru a afișa slideshow-ul foto. Apoi rulăm ng add @ngrx/store pentru a adăuga codul.
În continuare adăugăm codul schelet pentru codul pe care îl vom scrie. Executăm următoarele comenzi pentru a face acest lucru:
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
Aceasta va crea componentele folosite pentru afișare. Clasa httpReqInterceptor este utilizată pentru a atașa cheia API la antetul de cerere al fiecărei cereri. Photo service este locul unde va sta codul pentru efectuarea apelurilor către Pexels API.
În environment.ts, am pus să ne permită să importăm cheia API în alte fișiere.:
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
În http-req-interceptor.ts,adăugăm:
Aceasta atașează token-ul nostru la antetul de cerere Authorization al fiecărei cereri cu acest bloc:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
În photo.service.ts, punem:
Aceasta ne permite să facem cererile către API Pexels. Am folosit în aplicația noastră punctul final de fotografii curate și de căutare cu paginare.
În continuare, în home-page.component.ts, punem:
Acesta este locul în care obținem fotografiile din punctul final de fotografii curate, situat aici, pentru a obține URL-urile imaginilor prin apelarea map pe câmpul fotografii al răspunsului.
Dacă este introdus un termen de căutare, vom folosi punctul final de căutare a fotografiilor de aici și vom face același lucru cu funcția map. Avem derulare infinită, astfel încât atunci când utilizatorul derulează până în partea de jos a paginii, creștem numărul paginii și continuăm să adăugăm mai multe URL-uri de imagini în matricea noastră.
În home-page.component.html, punem:
Aceasta arată formularul de căutare și înfășoară grila noastră de fotografii într-o derulare infinită div astfel încât va încărca imagini noi atunci când utilizatorul derulează în jos.
infiniteScrollDistance este procentajul poziției paginii din partea de jos a paginii, deci 2 înseamnă că derularea infinită va fi declanșată atunci când am parcurs 98% din conținutul curent al paginii.
infiniteScrollThrottle este numărul de milisecunde până când se declanșează derularea infinită după ce utilizatorul se oprește din derulare. scrolled se declanșează atunci când utilizatorul derulează pagina în jos. Toate acestea sunt opționale și pot fi ajustate așa cum doriți.
În home-page.component.scss, adăugăm:
.tile-image {
width: 100%;
height: auto;
}
Aceasta face ca imaginile să umple caseta de grilă.
În random-slideshow-page.component.ts, punem:
Acesta este locul de unde luăm fotografiile aleatorii din punctul final al fotografiilor curatoriate.
În random-photos-page.component.html, adăugăm:
Aceasta arată prezentarea de fotografii.
În continuare facem un fișier numit menu-reducer.ts și adăugăm următoarele pentru a stoca starea meniului:
În reducers/index.ts, punem:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
Acest lucru permite ca StoreModule din @ngrx/store să folosească reductorul de meniu pentru stocarea stării.
În app.component.ts, adăugăm:
Acest lucru închide automat meniul din partea stângă atunci când se schimbă paginile și dacă nu se face clic pe butonul de meniu. Obținem starea meniului în magazin, iar dacă meniul trebuie să se închidă prin navigare sau făcând clic în afara meniului, dezactivăm meniul și setăm starea în magazin.
În top-bar.component.ts, punem:
Aceasta ne permite să activăm meniul și să stocăm starea în magazin.
În app.component.html, avem:
Aceasta arată meniul din partea stângă pentru navigare, iar router-outlet permite utilizatorilor să vadă paginile noastre atunci când dau clic pe link-urile de mai sus sau când tastează direct URL-ul.
În app.component.scss, adăugăm:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
Aceasta adaugă niște umplutură și elimină marginile de pe pagini.
În cele din urmă, în app.module.ts, punem:
Aceasta include toate bibliotecile, interceptorul HTTP și serviciile de care avem nevoie pentru a face aplicația să funcționeze.
În cele din urmă avem următoarele în aplicația finalizată:
