Ecke des Fußballfeldes

Was ist ein Resolver?

Um sicherzustellen, dass bestimmte Daten aus einer API-Antwort geladen werden, bevor die Route tatsächlich aktiviert wird, verwenden wir Routenauflöser.

Mit anderen Worten, um die Daten für eine bestimmte Route vorab abzurufen, bevor die Komponente geladen wird.

Warum einen Resolver verwenden?

Angenommen, es gibt einen Fall, in dem in einer Angular-Anwendung in einer Komponente einige Elemente spontan angezeigt werden, andere Komponenten jedoch geladen werden, nachdem Observable erfolgreich abonniert wurde. Hier kommen Resolver zur Rettung. Sie ermöglichen es Anwendungen, Daten zuerst von einer API-Antwort abzurufen, bevor die Komponente geladen wird, was die Routennavigation ermöglicht.

Beginnen wir mit der Implementierung von Resolvern.

Das könnte Sie auch interessieren: Angular Observables und Promises – Wie man sie benutzt.

Erstellen eines Resolver-Dienstes

  • Importieren der Resolve-Schnittstelle von @angular/router, die eine Resolve-Methode bereitstellt, die sicherstellt, dass alle zurückgegebenen Daten aufgelöst werden.
  • Resolve() hat zwei Parameter — route ActivatedRouteSnapshot und state RouterStateSnapshot wie folgt:

Resolve() Schnittstelle

Resolve() Schnittstelle
  • Die Resolve() Methode löst eine beobachtbare:

Mitarbeiter.Resolver.ts

Mitarbeiter.Resolver.ts

Hinzufügen eines Resolvers in Route

Wir fügen auch den Resolver hinzu.beheben.ts, in unseren Routen, und die resolve-Methode, die in unserem Resolver hinzugefügt wurde, gibt die aufgelösten Daten in den Schlüssel mit dem Namen empData .

ca.Modul.ts

ca.Modul.ts

Zugriff auf gelöste Daten in unserer EmployeeDetailsComponent

Auf gelöste Daten kann mit dem in unseren Routen definierten Schlüssel über das Snapshot-Objekt von ActivatedRoute zugegriffen werden.

Mitarbeiter-Details.Komponente.ts

Mitarbeiter-Details.Komponente.ts

Anzeige der aufgelösten Daten in HTML

employee-details.Komponente.html

Mitarbeiter-Details.Komponente.html

Und so funktioniert der Resolver – stellen Sie Ihre Daten zur Verfügung, bevor der Router funktioniert und Komponenten geladen werden!

Viel Spaß beim Lesen!

Weiterführende Literatur

  • Angular 8: Alles, was Sie wissen müssen.
  • Full-Stack-App mit Angular 8 und Web-API : Teil 1.
  • Loggen Sie sich mit Facebook und Google mit Angular 8 ein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.