futballpálya sarok

mi az a Resolver?

annak biztosítása érdekében, hogy bizonyos adatok betöltődnek egy API válaszból, mielőtt az útvonal ténylegesen aktiválódna, Útvonalfeloldókat használunk.

más szavakkal, egy adott útvonal adatainak előhívása az összetevő betöltése előtt.

miért érdemes Resolver-t használni?

tegyük fel, hogy van olyan eset, amikor egy szögletes alkalmazásban egy komponensben egyes elemek spontán módon jelennek meg, de más komponensek betöltődnek, Miután az Observable sikeresen feliratkozott, ami eltarthat egy ideig a megjelenítéshez a felhasználói felületen. Itt a Resolvers jön a mentésre. Lehetővé teszik az alkalmazások számára, hogy először az API-válaszból nyerjenek adatokat, mielőtt az összetevő betöltődik, lehetővé téve az útvonal navigációját.

kezdjük el a resolverek végrehajtását.

még tetszhet: Angular Observables and Promises – hogyan kell használni őket.

Resolver szolgáltatás létrehozása

  • feloldási felület importálása a @angular/router, amely olyan megoldási módszert biztosít, amely biztosítja, hogy a visszaadott adatok megoldódjanak.
  • Resolve() két paramétere van — útvonal, amely ActivatedRouteSnapshot és állapot, amely RouterStateSnapshot az alábbiak szerint:

Resolve() interfész

resolve() interfész
  • a Resolve() a módszer egy megfigyelhető:

alkalmazott.resolver.ts

alkalmazott.resolver.ts

feloldó hozzáadása az útvonalon

hozzáadjuk a feloldót, alkalmazott.elhatározás.TS, az útvonalainkban, és a resolverünkben hozzáadott resolver metódus visszaadja a megoldott adatokat a empDatanevű kulcsba.

app.modul.ts

app.modul.ts

A megoldott adatok elérése az EmployeeDetailsComponent alkalmazásban

a megoldott adatok az útvonalakon megadott kulcs segítségével érhetők el az ActivatedRoute pillanatkép objektumával.

alkalmazott-részletek.alkatrész.ts

alkalmazott-részletek.alkatrész.ts

A megoldott adatok megjelenítése HTML-ben

alkalmazott-részletek.alkatrész.html

alkalmazott-részletek.alkatrész.html

és így működik a resolver — tegye elérhetővé az adatait, mielőtt az útválasztó elkezd dolgozni, és az összetevők betöltődnek!

boldog olvasást!

további olvasmányok

  • 8.szög: minden, amit tudnod kell.
  • Full-Stack alkalmazás Angular 8-mal és Web API-val : 1.rész.
  • jelentkezzen be a Facebook és a Google segítségével az Angular 8 használatával.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.