Egy komponensnek a sablonja nem mindig rögzíthető. Az alkalmazásodnak lehet, hogy új komponenseket kell betöltenie a futás közben.
Használati forgatókönyvek:
1. Az oldal betöltése különböző paraméterek szerint tölti be a különböző komponenseket, eltérő hatásokat mutatva
2. Az oldal több elemből áll, nem mindegyiket kell az elején megjeleníteni, és a felhasználó kattintása után konkrét információk jelennek meg, például: füllapok, dinamikus felugró modális dobozok stb.
Ennek a cikknek a felhasználási helyzete 2, képzeld el,Ha nem használod a dinamikus betöltést, amikor megnyitod a fő felületet, az oldal összes rejtett komponense betöltődik, és minden komponens hívja a megfelelő interfész szolgáltatásait, gyakran nem kell minden információt látnunk, ami nagy erőforrás-pazarlás, és akár a fő felület lassan töltődik be, ami hatással van a felhasználói élményre。
Kétféleképpen lehet dinamikusan betölteni a komponenseket a ng-ben:
A már bejelentett komponensek betöltése: Használd a ComponentFactoryResolver egy komponens példányát egy másik komponens nézetre renderelni;
Komponensek létrehozása és betöltése dinamikusan: Használd a ComponentFactory-t és a Compilert komponensek létrehozásához és megjelenítéséhez
Igényeinknek megfelelően az egyes komponenseket előre kidolgozzuk, és ugyanazon az alkatrészen kell megjeleníteni őket. Tehát az első út megfelel a követelményeinknek.
Ahhoz, hogy dinamikusan betöltsük az alkatrészeket az ComponentFactoryResolver segítségével, a következő fogalmakat kell megérteni:
- ViewChild: Property decorator, amelyen keresztül megkaphatod a megfelelő elemeket a nézeten;
- ViewContainerRef: Egy nézettároló, amelyen komponensek létrehozhatók és törölhetők;
- ComponentFactoryResolver: Egy komponens elemző, amely képes megjeleníteni egy komponenst egy másik nézetén.
Először nézzük meg a rendereléseket, kattintsunk a modal1 gombra, hogy dinamikusan betöltsd a modal1 komponenst, és kattintsunk a modal2 gombra, hogy dinamikusan betöltsük a modal2 komponenst.
Először egy szögletes projektet készítünk.
Hozz létre 4 komponenset, nevezetesen indexet, modal1-t, modal2-t és modal3-at, amelyek közül modal1 és modal2 dinamikusan betöltött komponensünk.
Index komponens
HTML:
TS:
Modal1 komponens
HTML:
TS:
Modal2 komponens
HTML:
TS:
Modal3 komponens
HTML:
TS:
A nevüket három modálra nyomtattuk a konstruktorra.
Modal1 és modal2 is dinamikusan töltődik, csak akkor töltődik el a végrehajtó konstruktor, a modal3 nem használ dinamikus betöltést, a szülő felület betöltése után a modal3 interfész azonnal elindul.
Így láthatod a dinamikus betöltés előnyeit, és nem töltődik be, ha nem használod, hasonlóan a lusta betöltéshez a C#-ban.
Forráskód letöltés:
Turisták, ha szeretnétek megnézni ennek a bejegyzésnek a rejtett tartalmát, kérlek Válasz
Erőforrások:A hiperlink bejelentkezés látható.
|
Közzétéve 2020. 05. 29. 16:40:00
|
|
|
|
Háziúr|
Közzétéve 2020. 07. 24. 17:52:58
|
Közzétéve 2022. 10. 26. 17:27:19
|
