Malen til en komponent vil ikke alltid være fast. Appen din må kanskje laste inn noen nye komponenter under kjøring.
Bruksscenarier:
1. Sidelasting laster inn forskjellige komponenter i henhold til ulike parametere, og viser ulike effekter
2. Siden består av flere elementer, ikke alle trenger å vises i starten, og spesifikk informasjon vises etter at brukeren har klikket, som: fanefaner, dynamiske popup-modalbokser osv.
Bruksscenariet i denne artikkelen er 2, bare tenk deg,Hvis du ikke bruker dynamisk lasting, vil alle de skjulte komponentene på siden bli lastet inn når du åpner hovedgrensesnittet, og alle komponentene kaller sine tilsvarende grensesnitttjenester. Ofte trenger vi ikke å se all informasjonen, noe som er et stort sløsing med ressurser, og kan også føre til at hovedgrensesnittet laster sakte, noe som påvirker brukeropplevelsen。
Det finnes to måter å dynamisk laste komponenter i ng på:
Last inn allerede deklarerte komponenter: Bruk ComponentFactoryResolver for å gjengi en instans av en komponent til en annen komponentvisning;
Opprett og last inn komponenter dynamisk: Bruk ComponentFactory og Compiler for å lage og rendre komponenter
I henhold til våre behov utvikles de individuelle komponentene på forhånd og må vises på samme komponent. Så den første måten oppfyller våre krav.
For å laste inn komponenter dynamisk ved hjelp av ComponentFactoryResolver, må du forstå følgende konsepter:
- ViewChild: Property decorator, hvor du kan få de tilsvarende elementene i visningen;
- ViewContainerRef: En visningsbeholder hvor komponenter kan opprettes og slettes;
- ComponentFactoryResolver: En komponentparser som kan gjengi én komponent på en visning av en annen.
Først, la oss se på renderingene, klikk på modal1-knappen for å laste modal1-komponenten dynamisk, og klikk på modal2-knappen for å laste modal2-komponenten dynamisk.
Først lager vi et vinkelprosjekt.
Lag 4 komponenter, nemlig indeks, modal1, modal2 og modal3, hvorav modal1 og modal2 er våre dynamisk lastede komponenter.
Indekskomponent
html:
TS:
Modal1-komponent
html:
TS:
modal2-komponent
html:
TS:
modal3-komponent
html:
TS:
Vi trykket navnene deres på konstruktøren for 3 modaler.
modal1 og modal2 lastes begge dynamisk, men når knappen trykkes for å laste, vil utførelseskonstruktøren bli utløst, modal3 bruker ikke dynamisk lasting, etter at foreldregrensesnittet er lastet, vil modal3-grensesnittkonstruktøren bli utført umiddelbart.
På denne måten kan du se fordelene med dynamisk lasting, og den vil ikke laste hvis du ikke bruker den, på samme måte som lat lasting i C#.
Nedlasting av kildekode:
Turister, hvis dere vil se det skjulte innholdet i dette innlegget, vær så snill Svare
Ressurser:Innloggingen med hyperkoblingen er synlig.
|
Publisert på 29.05.2020 16:40:00
|
|
|
|
Vert|
Publisert på 24.07.2020 17:52:58
|
Publisert på 26.10.2022 17:27:19
|
