How To Add Infinite Scrolling to Your Angular App
Um mit der Erstellung der App zu beginnen, installieren wir zunächst das Angular CLI, indem wir npm i @angular/cli ausführen. Nachdem wir es installiert haben, führen wir ng new image-gallery aus, um ein neues Angular für unsere Bildergalerie-App zu erstellen. Außerdem erstellen wir einen Flux-Speicher, um den Status des Menüs zu speichern.
Als nächstes installieren wir die Bibliotheken für die App. Wir führen npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store aus, um die Bibliotheken zu installieren, die wir für die Anzeige der Fotos und die Fotodiashow benötigen. Dann führen wir ng add @ngrx/store aus, um den Code hinzuzufügen.
Als Nächstes fügen wir den Skelettcode für den Code hinzu, den wir schreiben werden. Dazu führen wir die folgenden Befehle aus:
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
Damit werden die für die Anzeige verwendeten Komponenten erstellt. Die Klasse httpReqInterceptor wird zum Anhängen des API-Schlüssels an den Request-Header jeder Anfrage verwendet. Photo Service ist der Ort, an dem sich der Code für die Aufrufe der Pexels-API befinden wird.
In environment.ts wird der API-Schlüssel in andere Dateien importiert.
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
In http-req-interceptor.ts fügen wir hinzu:
Damit wird unser Token an den Authorization Request-Header jeder Anfrage mit diesem Block angehängt:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
In photo.service.ts fügen wir ein:
Damit können wir die Anfragen an die Pexels API stellen. Wir haben den Endpunkt für kuratierte Fotos und die Suche mit Paginierung in unserer App verwendet.
Als Nächstes fügen wir in home-page.component.ts ein:
Hier holen wir uns die Fotos vom Endpunkt für kuratierte Fotos, der sich hier befindet, um die Bild-URLs zu erhalten, indem wir map für das Feld „photos“ der Antwort aufrufen.
Wenn ein Suchbegriff eingegeben wird, verwenden wir hier den Endpunkt für die Suche nach Fotos und tun dasselbe mit der Funktion map. Wenn der Benutzer zum unteren Ende der Seite scrollt, erhöhen wir die Seitenzahl und fügen weitere Bild-URLs zu unserem Array hinzu.
In home-page.component.html fügen wir ein:
Dies zeigt das Suchformular an und verpackt unser Foto-Grid in einen unendlichen Bildlauf div, so dass es neue Bilder lädt, wenn der Benutzer nach unten scrollt.
infiniteScrollDistance ist der Prozentsatz der Seitenposition vom unteren Rand der Seite, also 2 bedeutet, dass das unendliche Scrollen ausgelöst wird, wenn wir durch 98% des aktuellen Inhalts der Seite gescrollt haben.
infiniteScrollThrottle ist die Anzahl der Millisekunden, bis das unendliche Scrollen ausgelöst wird, nachdem der Benutzer das Scrollen beendet hat. scrolled wird ausgelöst, wenn der Benutzer auf der Seite nach unten scrollt. Diese sind alle optional und können nach Belieben angepasst werden.
In home-page.component.scss fügen wir hinzu:
.tile-image {
width: 100%;
height: auto;
}
Damit füllen die Bilder das Gitterfeld aus.
In random-slideshow-page.component.ts fügen wir hinzu:
Hierher kommen die zufälligen Fotos vom Endpunkt für kuratierte Fotos.
In random-photos-page.component.html fügen wir hinzu:
Dies zeigt die Diashow der Fotos.
Als Nächstes erstellen wir eine Datei namens menu-reducer.ts und fügen Folgendes hinzu, um den Menüstatus zu speichern:
In reducers/index.ts fügen wir ein:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
Damit kann StoreModule von @ngrx/store den Menüreduzierer zum Speichern des Status verwenden.
In app.component.ts fügen wir hinzu:
Dies schließt automatisch das linke Seitenmenü, wenn man die Seite wechselt und nicht auf die Menütaste klickt. Wenn das Menü durch Navigation oder Klicken außerhalb des Menüs geschlossen werden muss, schalten wir das Menü aus und setzen den Status im Shop.
In top-bar.component.ts fügen wir hinzu:
Damit können wir das Menü umschalten und den Status im Shop speichern.
In app.component.html haben wir:
Dies zeigt das Menü auf der linken Seite für die Navigation, und router-outlet lässt die Benutzer unsere Seiten sehen, wenn sie auf die Links oben klicken oder die URL direkt eingeben.
In app.component.scss fügen wir hinzu:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
Dies fügt etwas Polsterung hinzu und entfernt die Ränder auf den Seiten.
Schließlich fügen wir in app.module.ts ein:
Dies beinhaltet alle Bibliotheken, den HTTP-Interceptor und die Dienste, die wir benötigen, damit die App funktioniert.
Schließlich haben wir in der fertigen App folgendes:
