Komponendi mall ei ole alati fikseeritud. Sinu rakendus võib vajada käivitamise ajal uusi komponente laadida.
Kasutusstsenaariumid:
1. Lehe laadimine laadib erinevaid komponente vastavalt erinevatele parameetritele, näidates erinevaid efekte
2. Leht koosneb mitmest elemendist, mitte kõiki ei pea alguses kuvama, ning spetsiifiline info kuvatakse pärast kasutaja klikki, näiteks: vahelehtede vahekaardid, dünaamilised hüpikakende modaalkastid jne.
Selle artikli kasutusstsenaarium on 2, kujuta ette,Kui sa ei kasuta dünaamilist laadimist, siis kui avad peamise liidese, laaditakse kõik lehe peidetud komponendid ja kõik komponendid kutsuvad vastavad liideseteenused, sageli ei pea me kogu infot nägema, mis on suur ressursside raiskamine ja võib põhjustada peamise liidese aeglast laadimist, mõjutades kasutajakogemust。
Komponentide dünaamiliselt laadimiseks ng on kaks võimalust:
Laadi juba deklareeritud komponendid: Kasuta ComponentFactoryResolverit, et renderdada komponendi eksemplar teise komponendivaatesse;
Loo ja laadi komponente dünaamiliselt: Kasuta komponentide loomiseks ja renderdamiseks ComponentFactoryt ja Compilerit
Meie vajaduste järgi arendatakse üksikud komponendid eelnevalt välja ja neid tuleb kuvada samal komponendil. Seega vastab esimene viis meie nõuetele.
Komponentide dünaamiliseks laadimiseks ComponentFactoryResolveri abil tuleb mõista järgmisi kontseptsioone:
- ViewChild: Property decorator, mille kaudu saad vaadata vastavad elemendid;
- ViewContainerRef: vaatekonteiner, millel saab komponente luua ja kustutada;
- ComponentFactoryResolver: komponendiparser, mis suudab kuvada ühe komponendi teise vaates.
Kõigepealt vaatame renderdusi, klõpsame modal1 nupul, et dünaamiliselt laadida modal1 komponent, ja vajutame modal2 nuppu, et dünaamiliselt laadida modal2 komponent.
Esmalt loome nurkse projekti.
Loo 4 komponenti: indeks, modal1, modal2 ja modal3, millest modal1 ja modal2 on meie dünaamiliselt laetud komponendid.
Indeksikomponent
HTML:
TS:
modal1 komponent
HTML:
TS:
modal2 komponent
HTML:
TS:
modal3 komponent
HTML:
TS:
Me trükkisime nende nimed konstruktorile kolme modaali jaoks.
Modal1 ja modal2 laaditakse dünaamiliselt ainult siis, kui nuppu vajutatakse laadimiseks, käivitub täitmiskonstruktor, modal3 ei kasuta dünaamilist laadimist, pärast vanemliidese laadimist käivitatakse modal3 liidese konstruktor kohe.
Nii näed dünaamilise laadimise eeliseid ja see ei lae, kui sa seda ei kasuta, sarnaselt laiskale laadimisele C#-s.
Lähtekoodi allalaadimine:
Turistid, kui soovite näha selle postituse peidetud sisu, palun Vastuse
Ressursse:Hüperlingi sisselogimine on nähtav.
|
Postitatud 29.05.2020 16:40:00
|
|
|
|
Üürileandja|
Postitatud 24.07.2020 17:52:58
|
Postitatud 26.10.2022 17:27:19
|
