corner-of-soccer-field

ce este un Resolver?

pentru a ne asigura că anumite date sunt încărcate dintr-un răspuns API înainte ca ruta să fie activată efectiv, folosim rezolvatori de rute.

cu alte cuvinte, pentru a prefetch datele pentru un anumit traseu înainte de componenta este încărcată.

de ce să folosiți un Resolver?

presupunem că există un caz în care, într-o aplicație unghiulară, într-o componentă, unele elemente sunt afișate spontan, dar alte componente sunt încărcate după ce Observable este abonat cu succes, ceea ce ar putea dura ceva timp pentru a fi redat pe UI. Aici, rezolvatorii vin la salvare. Acestea permit aplicațiilor să recupereze mai întâi date dintr-un răspuns API înainte ca componenta să fie încărcată, permițând navigarea pe traseu.

Să începem implementarea Rezolvatorilor.

s – ar putea să vă placă și: observabile unghiulare și promisiuni-cum să le folosiți.

crearea unui serviciu de rezolvare

  • importarea interfeței de rezolvare din@angular/router, care oferă o metodă de rezolvare care asigură rezolvarea datelor returnate.
  • Resolve() are doi parametri — traseu care esteActivatedRouteSnapshot și de stat care esteRouterStateSnapshot ca mai jos:

rezolva() interfață

resolve() interface
  • Resolve() metoda rezolvă o problemă observabilă:

angajat.resolver.ts

angajat.resolver.ts

adăugarea unui Resolver în traseu

suntem adăugarea resolver, angajat.rezolva.ts, în rutele noastre și metoda de rezolvare, care a fost adăugată în rezolvatorul nostru, va returna datele rezolvate în cheia numită empData.

app.modulul.ts

app.modulul.ts

accesarea datelor rezolvate în EmployeeDetailsComponent nostru

datele rezolvate pot fi accesate folosind cheia definită în rutele noastre folosind obiect instantaneu ActivatedRoute lui.

angajat-detalii.componentă.ts

angajat-detalii.componentă.ts

afișarea datelor rezolvate în HTML

angajat-detalii.componentă.html

angajat-detalii.componentă.html

și așa funcționează rezolvatorul — faceți datele disponibile înainte ca routerul să înceapă să funcționeze și componentele să fie încărcate!

lectură plăcută!

Lectură suplimentară

  • Angular 8: Tot ce trebuie să știți.
  • App Full-Stack cu unghiular 8 și Web API: Partea 1.
  • Autentificare cu Facebook și Google folosind Angular 8.

Lasă un răspuns

Adresa ta de email nu va fi publicată.