Angular Router: Route Resolver

Eine Möglichkeit, Daten von einer API zu erhalten und anzuzeigen, besteht darin, einen Benutzer an eine Komponente weiterzuleiten und dann im ngOnInit-Hook dieser Komponente eine Methode in einem Dienst aufzurufen, um die erforderlichen Daten zu erhalten. Während die Daten abgerufen werden, kann die Komponente vielleicht eine Ladeanzeige anzeigen. Es gibt jedoch noch eine andere Möglichkeit, nämlich die Verwendung eines so genannten Routenauflösers, mit dem man Daten abrufen kann, bevor man zur neuen Route navigiert.

Einfacher Resolver

In diesem Beitrag werden wir einen einfachen Routenauflöser implementieren, der Daten von der Hacker News API abruft, die vom HNPWA-Projekt zur Verfügung gestellt wird, bevor man zu einer Route navigiert, die die gesammelten Daten anzeigt. Wir beginnen mit der Implementierung des einfachsten Resolvers, der einfach einen String nach einer Verzögerung von 2 Sekunden zurückgibt. Das sollte uns helfen, ein Gesamtbild davon zu bekommen, wie wir alles miteinander verdrahten müssen.

Wir erstellen eine separate Klasse für unseren Resolver in einer eigenen Datei:

Wie Sie sehen können, ist die einzige Voraussetzung für die Implementierung der Resolve-Schnittstelle des Angular-Routers, dass unsere Klasse eine resolve-Methode hat. Was auch immer von dieser Methode zurückgegeben wird, sind die aufgelösten Daten.

Hier geben wir ein Observable zurück, das einen String nach einer Verzögerung von 2 Sekunden umhüllt.

Routenkonfiguration

Jetzt können wir unser Routing-Modul so einrichten, dass es unseren Resolver enthält:

Beachten Sie, dass unser Resolver wie ein Dienst bereitgestellt wird und wir ihn dann in unsere Routendefinition aufnehmen. Hier werden die aufgelösten Daten unter dem Nachrichtenschlüssel verfügbar sein.

Zugriff auf aufgelöste Daten in der Komponente

In der Komponente können wir auf die aufgelösten Daten über die data-Eigenschaft des Snapshot-Objekts von ActivatedRoute zugreifen:

Und das ist alles, was wir brauchen. Jetzt können wir in unserer Komponente auf unsere Hello Alligator! Nachricht wie folgt zugreifen:

<p>the message: {{ data.message }}</p>

Sie werden bemerken, dass es jetzt eine 2-Sekunden-Verzögerung gibt, wenn Sie zur Route navigieren, weil die Daten zuerst aufgelöst werden.

Daten von einer API auflösen

Lassen Sie uns nun die Dinge realistischer gestalten, indem wir tatsächlich einige Daten von einer API erhalten. Hier werden wir einen Dienst erstellen, der Daten von der Hacker News API abruft.

Hier ist unser einfacher Dienst, bei dem wir auch den neuen HttpClient verwenden:

Und jetzt können wir unseren Resolver so ändern:

Zugang zu den Routenparametern

Den Zugang zu den aktuellen Routenparametern in Ihrem Resolver erhalten Sie über das ActivatedRouteSnapshot-Objekt. Hier ein Beispiel, bei dem wir unseren Resolver verwenden würden, um Zugriff auf den id-Parameter der aktuellen Route zu erhalten:

Unsere Route kann wie folgt aussehen:

{ path: 'post/:id', component: PostComponent, resolve: { hnData: HnResolver }}

Und hier ist die getPost-Methode in unserem Dienst:

getPost(postId: string) { const endpoint = 'https://hnpwa.com/api/v0/item'; return this.http.get(`${endpoint}/${postId}.json`);}

Wenn nun ein Benutzer zu, sagen wir, http://localhost:4200/post/15392112 geht, werden die Daten für die Post-ID 15392112 aufgelöst.

Fehlerbehandlung

Für den Fall, dass beim Abrufen der Daten ein Fehler auftritt, können Sie den Fehler im Resolver mit dem catch-Operator von RxJS abfangen und behandeln. Zum Beispiel so:

Oder Sie könnten ein leeres Observable zurückgeben, in diesem Fall wird der Benutzer nicht an die neue Route weitergeleitet:

resolve() { return this.hnService.getTopPosts().catch(() => { return Observable.empty(); });}