Mallen för en komponent är inte alltid fast. Din app kan behöva ladda några nya komponenter under körning.
Användningsscenarier:
1. Sidladdning laddar olika komponenter enligt olika parametrar, vilket visar olika effekter
2. Sidan består av flera element, inte alla behöver visas i början, och specifik information visas efter att användaren klickat, såsom: flikflikar, dynamiska popup-modalrutor med mera.
Användningsscenariot i denna artikel är 2, tänk dig bara,Om du inte använder dynamisk laddning, när du öppnar huvudgränssnittet, kommer alla dolda komponenter på sidan att laddas och alla komponenter anropar sina motsvarande gränssnittstjänster, ofta behöver vi inte se all information, vilket är ett stort resursslöseri och kan också göra att huvudgränssnittet laddas långsamt, vilket påverkar användarupplevelsen。
Det finns två sätt att dynamiskt ladda komponenter i ng:
Ladda redan deklarerade komponenter: Använd ComponentFactoryResolver för att rendera en instans av en komponent till en annan komponentvy;
Skapa och ladda komponenter dynamiskt: Använd ComponentFactory och Compiler för att skapa och rendera komponenter
Enligt våra behov utvecklas de enskilda komponenterna i förväg och måste visas på samma komponent. Så det första sättet uppfyller våra krav.
För att dynamiskt ladda komponenter med ComponentFactoryResolver behöver du förstå följande koncept:
- ViewChild: Property decorator, genom vilken du kan få motsvarande element i vyn;
- ViewContainerRef: En vybehållare där komponenter kan skapas och raderas;
- ComponentFactoryResolver: En komponentparser som kan rendera en komponent på en vy av en annan.
Först, låt oss titta på renderingarna, klicka på modal1-knappen för att dynamiskt ladda modal1-komponenten, och klicka på modal2-knappen för att dynamiskt ladda modal2-komponenten.
Först skapar vi ett vinkelprojekt.
Skapa fyra komponenter, nämligen index, modal1, modal2 och modal3, varav modal1 och modal2 är våra dynamiskt laddade komponenter.
Indexkomponent
html:
TS:
modal1-komponent
html:
TS:
Modal2-komponent
html:
TS:
modal3-komponent
html:
TS:
Vi skrev ut deras namn på konstruktören för 3 modaler.
modal1 och modal2 laddas båda dynamiskt, endast när knappen trycks för att ladda triggas exekveringskonstruktorn, modal3 använder inte dynamisk laddning, efter att föräldragränssnittet har laddats kommer modal3-gränssnittets konstruktör att köras omedelbart.
På detta sätt kan du se fördelarna med dynamisk laddning, och den kommer inte att laddas om du inte använder den, liknande lat laddning i C#.
Källkodsnedladdning:
Turister, om ni vill se det dolda innehållet i detta inlägg, snälla Svar
Resurser:Inloggningen med hyperlänken är synlig.
|
Publicerad på 2020-05-29 16:40:00
|
|
|
|
Hyresvärd|
Publicerad på 2020-07-24 17:52:58
|
Publicerad på 2022-10-26 17:27:19
|
