Het sjabloon van een component is niet altijd vast. Je app moet mogelijk tijdens de runtime nieuwe componenten laden.
Gebruiksscenario's:
1. Paginaladen laadt verschillende componenten volgens verschillende parameters, met verschillende effecten
2. De pagina bestaat uit meerdere elementen, waarvan niet alle aan het begin getoond hoeven te worden, en specifieke informatie wordt weergegeven nadat de gebruiker heeft geklikt, zoals: tabbladen, dynamische pop-up modale vakken, enzovoort.
Het gebruiksscenario van dit artikel is 2, stel je voor,Als je geen dynamisch laden gebruikt, worden bij het openen van de hoofdinterface alle verborgen componenten van de pagina geladen en roepen alle componenten hun bijbehorende interfaceservices aan; vaak hoeven we niet alle informatie te zien, wat een grote verspilling van middelen is en er ook voor kan zorgen dat de hoofdinterface langzaam laadt, wat de gebruikerservaring beïnvloedt。
Er zijn twee manieren om componenten dynamisch te laden in ng:
Laad reeds gedeclareerde componenten: Gebruik ComponentFactoryResolver om een instantie van een component naar een andere componentweergave te renderen;
Maak en laad componenten dynamisch: Gebruik ComponentFactory en Compiler om componenten te creëren en te renderen
Volgens onze behoeften worden de individuele componenten vooraf ontwikkeld en moeten ze op hetzelfde onderdeel worden weergegeven. Dus de eerste manier voldoet aan onze eisen.
Om componenten dynamisch te laden met ComponentFactoryResolver, moet je de volgende concepten begrijpen:
- ViewChild: Property decorator, waarmee je de bijbehorende elementen op de view kunt krijgen;
- ViewContainerRef: Een view-container waarop componenten kunnen worden aangemaakt en verwijderd;
- ComponentFactoryResolver: Een componentparser die één component kan weergeven op een weergave van een andere.
Laten we eerst naar de renderings kijken: klik op de modal1-knop om het modal1-component dynamisch te laden, en klik op de modal2-knop om de modal2-component dynamisch te laden.
Eerst creëren we een hoekproject.
Maak 4 componenten, namelijk index, modal1, modal2 en modal3, waarvan modal1 en modal2 onze dynamisch geladen componenten zijn.
Indexcomponent
html:
TS:
modal1-component
html:
TS:
modal2-component
html:
TS:
modal3-component
html:
TS:
We hebben hun namen op de constructor voor 3 modals gedrukt.
modal1 en modal2 worden beide dynamisch geladen; alleen wanneer op de knop wordt geklikt om te laden, wordt de uitvoeringsconstructor geactiveerd, modal3 gebruikt geen dynamische lading, nadat de ouderinterface is geladen, wordt de modal3-interfaceconstructor onmiddellijk uitgevoerd.
Op deze manier zie je de voordelen van dynamisch laden, en het zal niet laden als je het niet gebruikt, vergelijkbaar met lui laden in C#.
Broncode downloaden:
Toeristen, als jullie de verborgen inhoud van dit bericht willen zien, alsjeblieft Antwoord
Weg:De hyperlink-login is zichtbaar.
|
Geplaatst op 29-05-2020 16:40:00
|
|
|
|
Huisbaas|
Geplaatst op 24-07-2020 17:52:58
|
Geplaatst op 26-10-2022 17:27:19
|
