Predloga komponente ne bo vedno fiksna. Vaša aplikacija bo morda morala med izvajanjem naložiti nove komponente.
Scenariji uporabe:
1. Nalaganje strani nalaga različne komponente glede na različne parametre in prikazuje različne učinke
2. Stran je sestavljena iz več elementov, ni nujno, da so vsi prikazani na začetku, določene informacije pa se prikažejo po kliku uporabnika, kot so: zavihki zavihkov, dinamična pojavna okna itd.
Scenarij uporabe tega članka je 2, samo predstavljajte si,Če ne uporabljate dinamičnega nalaganja, se ob odprtju glavnega vmesnika naložijo vse skrite komponente strani, vse komponente pa pokličejo ustrezne storitve vmesnika, pogosto ne potrebujemo videti vseh informacij, kar je velika izguba virov in lahko povzroči počasno nalaganje glavnega vmesnika, kar vpliva na uporabniško izkušnjo。
Obstajata dva načina za dinamično nalaganje komponent v ng:
Naloži že deklarirane komponente: Uporabi ComponentFactoryResolver za upodabljanje primerka komponente v drug pogled komponente;
Dinamično ustvarjajte in nalagajte komponente: Uporabite ComponentFactory in Compiler za ustvarjanje in upodabljanje komponent
Glede na naše potrebe so posamezne komponente razvite vnaprej in jih je treba prikazati na isti komponenti. Torej prvi način ustreza našim zahtevam.
Za dinamično nalaganje komponent z uporabo ComponentFactoryResolverja morate razumeti naslednje koncepte:
- ViewChild: Property dekorator, preko katerega lahko dobite ustrezne elemente na pogledu;
- ViewContainerRef: Vsebnik za pogled, v katerem je mogoče ustvariti in izbrisati komponente;
- ComponentFactoryResolver: Razčlenjevalnik komponent, ki lahko upodablja eno komponento v pogledu druge.
Najprej si poglejmo upodabljanja, kliknite gumb modal1 za dinamično nalaganje komponente modal1 in kliknite gumb modal2 za dinamično nalaganje komponente modal2.
Najprej ustvarimo kotni projekt.
Ustvarite 4 komponente, in sicer indeks, modal1, modal2 in modal3, pri čemer sta modal1 in modal2 naši dinamično naloženi komponenti.
Indeksna komponenta
html:
TS:
Modal1 komponenta
html:
TS:
Modal2 komponenta
html:
TS:
Modal3 komponenta
html:
TS:
Njihova imena smo natisnili na konstruktor za 3 modale.
Modal1 in Modal2 sta oba dinamično nalagana, le ko se klikne gumb za nalaganje, se sproži konstruktor izvajanja, Modal3 ne uporablja dinamičnega nalaganja, po nalaganju nadrejenega vmesnika se konstruktor vmesnika Modal3 izvede takoj.
Na ta način lahko vidiš prednosti dinamičnega nalaganja, ki se ne bo naložil, če ga ne uporabljaš, podobno kot leno nalaganje v C#.
Prenos izvorne kode:
Turisti, če želite videti skrito vsebino te objave, prosim Odgovoriti
Sredstva:Prijava do hiperpovezave je vidna.
|
Objavljeno na 29. 05. 2020 16:40:00
|
|
|
|
Najemodajalec|
Objavljeno na 24. 07. 2020 17:52:58
|
Objavljeno na 26. 10. 2022 17:27:19
|
