Hoe Oneindig Scrollen Toevoegen aan Uw Angular App
Om te beginnen met het bouwen van de app, beginnen we met het installeren van de Angular CLI door npm i @angular/cli te draaien. Nadat we het hebben geïnstalleerd, draaien we ng new image-gallery om een nieuwe Angular voor onze afbeeldingsgalerij app te maken. Ook maken we een Flux store om de status van het menu op te slaan.
Volgende installeren we de bibliotheken voor de app. We draaien npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store om de bibliotheken te installeren die we nodig hebben om de foto’s weer te geven en de foto slideshow te tonen. Dan draaien we ng add @ngrx/store om de code toe te voegen.
Volgende voegen we skeletcode toe voor de code die we zullen schrijven. We voeren de volgende commando’s uit om dit te doen:
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
Dit zal de componenten creëren die worden gebruikt voor de weergave. De httpReqInterceptor klasse wordt gebruikt om de API sleutel toe te voegen aan de request header van elk verzoek. Photo service is waar de code voor het maken van de oproepen naar de Pexels API zal verblijven.
In environment.ts, zetten we om ons te laten importeren uw API-sleutel naar andere bestanden.
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
In http-req-interceptor.ts, voegen we toe:
Dit hecht ons token aan de Authorization request header van elk verzoek met dit blok:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
In photo.service.ts, zetten we:
Dit laat ons de verzoeken aan de Pexels API doen. We gebruikten het curated photos en search endpoint met paginering in onze app.
Volgende in home-page.component.ts, zetten we:
Dit is waar we de foto’s krijgen van het curated photos endpoint, dat zich hier bevindt, om de beeld-URL’s te krijgen door map aan te roepen op het foto’s-veld van de respons.
Als een zoekterm wordt ingevoerd, gebruiken we hier het search photos endpoint en doen we hetzelfde met de map-functie. We hebben oneindig scrollen, dus als de gebruiker naar de onderkant van de pagina scrollt, verhogen we het paginanummer en blijven meer foto-URL’s aan onze array toevoegen.
In home-page.component.html, zetten we:
Dit toont het zoekformulier en wikkelt onze fotogrid in een oneindige scroll div zodat het nieuwe afbeeldingen laadt als de gebruiker naar beneden scrolt.
infiniteScrollDistance is het percentage van de paginapositie vanaf de onderkant van de pagina, dus 2 betekent dat oneindig scrollen wordt geactiveerd wanneer we door 98% van de huidige inhoud op de pagina zijn gescrolld.
infiniteScrollThrottle is het aantal milliseconden totdat oneindig scrollen wordt geactiveerd nadat de gebruiker stopt met scrollen. De scrolled wordt geactiveerd wanneer de gebruiker naar beneden scrollt op de pagina. Deze zijn allemaal optioneel en kunnen worden aangepast zoals u wilt.
In home-page.component.scss, voegen we toe:
.tile-image {
width: 100%;
height: auto;
}
Dit zorgt ervoor dat de afbeeldingen de raster box vullen.
In random-slideshow-page.component.ts, zetten we:
Dit is waar we de willekeurige foto’s krijgen van het curated photos endpoint.
In random-photos-page.component.html, voegen we toe:
Dit toont de diavoorstelling van foto’s.
Volgende maken we een bestand genaamd menu-reducer.ts en voegen het volgende toe om de menu status op te slaan:
In reducers/index.ts, zetten we:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
Dit laat de StoreModule van @ngrx/store toe om de menu reducer te gebruiken voor het opslaan van de status.
In app.component.ts, voegen we toe:
Dit sluit automatisch het menu aan de linkerkant bij het veranderen van pagina en als je niet op de menu knop klikt. We krijgen de menu staat in de winkel, en als het menu moet sluiten door navigatie of klikken buiten het menu, schakelen we het menu uit en zetten de staat in de winkel.
In top-bar.component.ts, zetten we:
Dit stelt ons in staat om het menu uit te schakelen en de staat in de winkel op te slaan.
In app.component.html, hebben we:
Dit toont het menu aan de linkerkant voor navigatie, en router-outlet laat gebruikers onze pagina’s zien als ze op de links hierboven klikken of als ze de URL direct intypen.
In app.component.scss, voegen we toe:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
Dit voegt wat padding toe en verwijdert de marges op de pagina’s.
Ten slotte in app.module.ts, zetten we:
Dit bevat alle bibliotheken, de HTTP interceptor, en de services die we nodig hebben om de app te laten werken.
Eindelijk hebben we het volgende in de afgewerkte app:
