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:
Resolve()
metoda rezolvă o problemă observabilă:
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
.
accesarea datelor rezolvate în EmployeeDetailsComponent nostru
datele rezolvate pot fi accesate folosind cheia definită în rutele noastre folosind obiect instantaneu ActivatedRoute lui.
afișarea datelor rezolvate în 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.