Komponentin mallipohja ei aina ole kiinteä. Sovelluksesi saattaa joutua lataamaan uusia komponentteja ajon aikana.
Käyttötilanteet:
1. Sivun lataus lataa eri komponentteja eri parametrien mukaan, mikä näyttää erilaisia vaikutuksia
2. Sivu koostuu useista elementeistä, joita kaikkia ei tarvitse näyttää alussa, ja käyttäjän klikkauksen jälkeen näytetään tarkat tiedot, kuten: välilehti, dynaamiset ponnahdusikkunat jne.
Tämän artikkelin käyttötilanne on 2, kuvittele vain,Jos et käytä dynaamista latausta, kun avaat päärajapinnan, kaikki sivun piilotetut komponentit latautuvat ja kaikki komponentit kutsuvat vastaavia rajapintapalveluitaan, usein emme tarvitse nähdä kaikkea tietoa, mikä on suuri resurssien tuhlausta ja voi myös hidastaa päärajapintaa, mikä vaikuttaa käyttäjäkokemukseen。
Ng:ssä on kaksi tapaa ladata komponentteja dynaamisesti:
Lataa jo ilmoitetut komponentit: Käytä ComponentFactoryResolveria renderöidäksesi komponentin instanssin toiseen komponenttinäkymään;
Luo ja lataa komponentteja dynaamisesti: Käytä ComponentFactorya ja Compileria komponenttien luomiseen ja renderöintiin
Tarpeidemme mukaan yksittäiset komponentit kehitetään etukäteen ja ne tulee esittää samalla komponentilla. Joten ensimmäinen tapa täyttää vaatimuksimme.
Komponenttien dynaamiseen lataamiseen ComponentFactoryResolverilla sinun tulee ymmärtää seuraavat käsitteet:
- ViewChild: Property decorator, jonka kautta voit saada vastaavat elementit näkymästä;
- ViewContainerRef: Näkymäkontti, johon komponentteja voidaan luoda ja poistaa;
- ComponentFactoryResolver: Komponenttijäsenin, joka voi renderöidä yhden komponentin toisen näkymässä.
Ensiksi katsotaan renderöintiä, klikkataan modal1-painiketta ladataksemme modal1-komponentin dynaamisesti ja klikkaamme modal2-painiketta ladataksemme modal2-komponentin dynaamisesti.
Ensiksi luomme kulmikkaan projektin.
Luo neljä komponenttia, nimittäin indeksi, modal1, modal2 ja modal3, joista modal1 ja modal2 ovat dynaamisesti ladattuja komponentteja.
Indeksikomponentti
html:
TS:
modal1-komponentti
html:
TS:
modal2-komponentti
html:
TS:
modal3-komponentti
html:
TS:
Tulostimme heidän nimensä konstruktoriin kolmelle modaalille.
Modal1 ja modal2 ladataan dynaamisesti, ja vain kun nappia painetaan latausta varten, suorituskonstruktori aktivoituu, modal3 ei käytä dynaamista latausta, ja vanhemman rajapinnan ladattua modal3-rajapinnan rakentaja suoritetaan välittömästi.
Näin näet dynaamisen latauksen edut, eikä se lataudu, jos et käytä sitä, aivan kuten laiska lataus C#:ssa.
Lähdekoodin lataus:
Turistit, jos haluatte nähdä tämän postauksen piilotetun sisällön, olkaa hyvä Vastaus
Varat:Hyperlinkin kirjautuminen on näkyvissä.
|
Julkaistu 29.5.2020 16.40.00
|
|
|
|
Vuokraisäntä|
Julkaistu 24.7.2020 17.52.58
|
Julkaistu 26.10.2022 17.27.19
|
