Komponento šablonas ne visada bus fiksuotas. Jūsų programai gali reikėti įkelti keletą naujų komponentų vykdymo metu.
Naudojimo scenarijai:
1. Puslapio įkėlimas įkelia skirtingus komponentus pagal skirtingus parametrus, rodydamas skirtingus efektus
2. Puslapį sudaro keli elementai, ne visi jie turi būti rodomi pradžioje, o vartotojui spustelėjus bus rodoma konkreti informacija, pvz.: skirtukų skirtukai, dinaminiai iššokantys modaliniai langai ir kt.
Šio straipsnio naudojimo scenarijus yra 2, tik įsivaizduokite,Jei nenaudojate dinaminio įkėlimo, atidarius pagrindinę sąsają, bus įkelti visi paslėpti puslapio komponentai, o visi komponentai iškviečia atitinkamas sąsajos paslaugas, dažnai mums nereikia matyti visos informacijos, o tai yra didelis išteklių švaistymas, be to, pagrindinė sąsaja gali būti įkeliama lėtai, o tai turi įtakos vartotojo patirčiai。
Yra du būdai, kaip dinamiškai įkelti komponentus ng:
Įkelti jau deklaruotus komponentus: naudokite ComponentFactoryResolver, kad atvaizduotumėte komponento egzempliorių į kitą komponento rodinį;
Dinamiškas komponentų kūrimas ir įkėlimas: naudokite "ComponentFactory" ir kompiliatorių komponentams kurti ir generuoti
Pagal mūsų poreikius atskiri komponentai yra kuriami iš anksto ir turi būti rodomi tame pačiame komponente. Taigi pirmasis būdas atitinka mūsų reikalavimus.
Norėdami dinamiškai įkelti komponentus naudodami "ComponentFactoryResolver", turite suprasti šias sąvokas:
- ViewChild: Nekilnojamojo turto dekoratorius, per kurį galite gauti atitinkamus elementus rodinyje;
- ViewContainerRef: rodinio konteineris, kuriame galima kurti ir panaikinti komponentus;
- ComponentFactoryResolver: komponentų analizatorius, galintis generuoti vieną komponentą kito rodinyje.
Pirmiausia pažvelkime į atvaizdus, spustelėkite mygtuką modal1, kad dinamiškai įkeltumėte modal1 komponentą, ir spustelėkite modal2 mygtuką, kad dinamiškai įkeltumėte modal2 komponentą.
Pirmiausia sukuriame kampinį projektą.
Sukurkite 4 komponentus, būtent indeksą, modalą1, modalą2 ir modalą3, iš kurių modalas1 ir modalas2 yra mūsų dinamiškai apkrauti komponentai.
Indekso komponentas
html:
TS:
Modal1 komponentas
html:
TS:
Modal2 komponentas
html:
TS:
Modal3 komponentas
html:
TS:
Mes atspausdinome jų pavadinimus ant konstruktoriaus 3 modalams.
"Modal1" ir "Modal2" yra dinamiškai įkeliami, tik spustelėjus mygtuką įkelti, bus suaktyvintas vykdymo konstruktorius, "Modal3" nenaudoja dinaminio įkėlimo, įkėlus pirminę sąsają, "Modal3" sąsajos konstruktorius bus vykdomas nedelsiant.
Tokiu būdu galite pamatyti dinaminio pakrovimo pranašumus ir jis nebus įkeltas, jei jo nenaudosite, panašiai kaip tingus įkėlimas C#.
Šaltinio kodo atsisiuntimas:
Turistai, jei norite pamatyti paslėptą šio įrašo turinį, prašome Atsakyti
Išteklių:Hipersaito prisijungimas matomas.
|
Paskelbta 2020-05-29 16:40:00
|
|
|
|
Savininkas|
Paskelbta 2020-07-24 17:52:58
|
Paskelbta 2022-10-26 17:27:19
|
