Vorzeitiges Abrufen bedeutet, dass die Daten abgerufen werden, bevor sie auf dem Bildschirm angezeigt werden. In diesem Artikel erfahren Sie, wie Sie Daten abrufen, bevor Sie Änderungen weiterleiten. In diesem Artikel erfahren Sie, wie Sie resolver
verwenden, resolver
in Angular App
anwenden und sie auf eine gängige vorinstallierte Navigation anwenden. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]
Resolver
verwenden solltenResolver
spielt die Rolle eines Middleware-Dienstes zwischen Routing und Komponenten. Angenommen, Sie haben ein Formular ohne Daten und möchten dem Benutzer ein leeres Formular präsentieren, einen loader
anzeigen, während die Benutzerdaten geladen werden, und dann, wenn die Daten zurückgegeben werden, das Formular füllen und loader
ausblenden.
Normalerweise erhalten wir Daten in der Hook-Funktion ngOnInit()
der Komponente. Mit anderen Worten: Nachdem die Komponente geladen wurde, initiieren wir eine Datenanforderung.
Wenn wir in ngOnInit()
arbeiten, müssen wir loader
-Anzeige zu seiner Routing-Seite hinzufügen, nachdem jede erforderliche Komponente geladen wurde. Resolver
kann das Hinzufügen und Verwenden von loader
vereinfachen. Anstatt jeder Route loader
hinzuzufügen, können Sie einfach einen loader
für jede Route hinzufügen.
In diesem Artikel werden Beispiele verwendet, um die Wissenspunkte des resolver
zu analysieren. Damit Sie es sich merken und in Ihren Projekten verwenden können.
Resolver
in AnwendungenUm resolver
in Anwendungen verwenden zu können, müssen Sie einige Schnittstellen vorbereiten. Sie können es über JSONPlaceholder simulieren, ohne es selbst zu entwickeln.
JSONPlaceholder
ist eine großartige Schnittstellenressource, mit der Sie verwandte Konzepte des Frontends besser erlernen können, ohne durch die Schnittstelle eingeschränkt zu werden.
Nachdem das Schnittstellenproblem nun gelöst ist, können wir die resolver
-Anwendung starten. Ein resolver
ist ein Middleware-Dienst, daher erstellen wir einen Dienst.
$ ng gs restarts/demo-resolver --skipTests=true
--skipTests=true überspringt die Generierung von Testdateien
. Ein Dienst wird im Ordner src/app/resolvers
erstellt. In der resolver
Schnittstelle gibt es eine Methode resolve()
, die über zwei Parameter verfügt: route
(eine Instanz von ActivatedRouteSnapshot
) und state
(eine Instanz von RouterStateSnapshot
).
loader
schreibt normalerweise alle AJAX
Anfragen in ngOnInit()
, aber die Logik wird im resolver
statt in ngOnInit()
implementiert.
Erstellen Sie als Nächstes einen Dienst, um die Listendaten im JSONPlaceholder
abzurufen. Rufen Sie es dann im resolver
auf und konfigurieren Sie dann resolve
Auflösungsinformationen in der Route (die Seite wartet), bis resolver
verarbeitet wird. Nachdem resolver
verarbeitet wurde, können wir die Daten durch Routing abrufen und in der Komponente anzeigen.
$ ng gs services/posts --skipTests=true
Nachdem wir den Dienst nun erfolgreich erstellt haben, ist es an der Zeit, die Logik für eine AJAX
Anfrage zu schreiben.
Der Einsatz von model
kann uns helfen, Fehler zu reduzieren.
$ ng g class models/post --skipTests=true
post.ts
export class Post { id: number; Titel: Zeichenfolge; Körper: Zeichenfolge; Benutzer-ID: Zeichenfolge; }
model
ist fertig, es ist Zeit, die Daten des post
abzurufen.
post.service.ts
import { Injectable } from „@angular/core“; import { HttpClient } from „@angular/common/http“; import { Post } from "../models/post"; @Injectable({ bereitgestelltIn: „root“ }) Exportklasse PostsService { Konstruktor(private _http: HttpClient) {} getPostList() { let URL = „https://jsonplaceholder.typicode.com/posts“; return this._http.get<Post[]>(URL); } }
Dieser Dienst kann nun jederzeit aufgerufen werden.
demo-resolver.service.ts
import { Injectable } from „@angular/core“; importieren { Lösen, ActivatedRouteSnapshot, RouterStateSnapshot } von „@angular/router“; import { PostsService } from "../services/posts.service"; @Injectable({ bereitgestelltIn: „root“ }) Die Exportklasse DemoResolverService implementiert Resolve<any> { Konstruktor(private _postsService: PostsService) {} lösen(route: ActivatedRouteSnapshot, Status: RouterStateSnapshot) { return this._postsService.getPostList(); } }
Post-Listendaten, die vom resolver
zurückgegeben wurden. Jetzt benötigen Sie eine Route, um resolver
zu konfigurieren, die Daten von der Route abzurufen und sie dann in der Komponente anzuzeigen. Um Routing-Sprünge durchführen zu können, müssen wir eine Komponente erstellen.
$ ng gc Components/Post-List --skipTests=true
Um die Route sichtbar zu machen, fügen Sie router-outlet
in app.component.ts
hinzu.
<router-outlet></router-outlet>
Jetzt können Sie die Datei app-routing.module.ts
konfigurieren. Der folgende Codeausschnitt hilft Ihnen, den Routenkonfigurations- resolver
zu verstehen.
app-routing-module.ts
import { NgModule } from „@angular/core“; import { Routes, RouterModule } from „@angular/router“; import { PostListComponent } from "./components/post-list/post-list.component"; import { DemoResolverService } aus "./resolvers/demo-resolver.service"; const Routen: Routen = [ { Pfad: „Beiträge“, Komponente: PostListComponent, lösen: { Beiträge: DemoResolverService } }, { Weg: "", RedirectTo: „Beiträge“, pathMatch: „voll“ } ]; @NgModule({ Importe: [RouterModule.forRoot(routes)], Exporte: [RouterModule] }) export class AppRoutingModule {}
Der Routing-Konfiguration wurde eine resolve
hinzugefügt, die eine HTTP
Anfrage initiiert und dann die Initialisierung der Komponente ermöglicht, wenn HTTP
Anfrage erfolgreich zurückgegeben wird. Die Route stellt die von HTTP
Anfrage zurückgegebenen Daten zusammen.
anzuzeigen, dass eine Anfrage ausgeführt wird, schreiben wir einen öffentlichen und einfachen loader
in AppComponent
. Sie können es nach Bedarf anpassen.
app.component.html
<div class="loader" *ngIf="isLoader"> <div>Laden...</div> </div> <router-outlet></router-outlet>
app.component.ts
import { Component } from „@angular/core“; importieren { Router, RouterEvent, NavigationStart, NavigationEnde } von „@angular/router“; @Komponente({ Selektor: „app-root“, templateUrl: „./app.component.html“, styleUrls: ["./app.component.scss"] }) Exportklasse AppComponent { isLoader: boolean; Konstruktor(private _router: Router) {} ngOnInit() { this.routerEvents(); } routerEvents() { this._router.events.subscribe((event: RouterEvent) => { switch (wahr) { case-Ereignisinstanz von NavigationStart: { this.isLoader = true; brechen; } case-Ereignisinstanz von NavigationEnd: { this.isLoader = false; brechen; } } }); } }
Wenn die Navigation startet, wird isLoader
-Wert true
zugewiesen und Sie werden den folgenden Effekt auf der Seite sehen.
Wenn resolver
die Verarbeitung abgeschlossen hat, wird er ausgeblendet.
Jetzt ist es an der Zeit, den Wert aus der Route abzurufen und anzuzeigen.
port-list.component.ts
import { Component, OnInit } from „@angular/core“; import { Router, ActivatedRoute } from „@angular/router“; importiere { Post } aus „src/app/models/post“; @Komponente({ Selektor: „app-post-list“, templateUrl: „./post-list.component.html“, styleUrls: ["./post-list.component.scss"] }) Die Exportklasse PostListComponent implementiert OnInit { Beiträge: Post[]; Konstruktor(private _route: ActivatedRoute) { this.posts = []; } ngOnInit() { this.posts = this._route.snapshot.data["posts"]; } }
Wie oben gezeigt, stammt der Wert von post
aus den Snapshot- data
von ActivatedRoute
. Beide Werte können erhalten werden, solange Sie in der Route dieselben Informationen konfigurieren.
Wir rendern wie folgt in HTML
.
<div class="post-list grid-container"> <div class="card" *ngFor="let post of posts"> <div class="title"><b>{{post?.title}}</b></div> <div class="body">{{post.body}}</div> </div> </div>
CSS
Fragmentstile lassen es schöner aussehen.
port-list.component.css
.grid-container { Anzeige: Raster; Rastervorlagenspalten: calc(100% / 3) calc(100% / 3) calc(100% / 3); } .card { Rand: 10px; Kastenschatten: Schwarz 0 0 2px 0px; Polsterung: 10px; }
Es wird empfohlen, den SCSS-Präprozessor zum Schreiben von Stilen zu verwenden.
Nachdem die Daten von der Route abgerufen wurden, werden sie in HTML
angezeigt. Der Effekt ist wie folgt: Schnappschuss.
An diesem Punkt haben Sie gelernt, wie Sie resolver
in Ihrem Projekt verwenden.
In Kombination mit User Experience Design und mithilfe von resolver
können Sie die Leistung Ihrer Anwendung verbessern. Um mehr zu erfahren, können Sie die offizielle Website besuchen.
Bei diesem Artikel handelt es sich um eine kostenlose Übersetzung mit persönlichem Verständnis und hinzugefügten Kommentaren. Die ursprüngliche Adresse lautet:
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route