Skabelonen for en komponent vil ikke altid være fast. Din app kan have brug for at indlæse nogle nye komponenter under kørsel.
Brugsscenarier:
1. Sideindlæsning indlæser forskellige komponenter efter forskellige parametre, hvilket viser forskellige effekter
2. Siden består af flere elementer, ikke alle behøver at vises i starten, og specifik information vises efter brugerens klik, såsom: fane-faner, dynamiske pop-up modalbokse osv.
Brugsscenariet i denne artikel er 2, forestil dig bare,Hvis du ikke bruger dynamisk indlæsning, vil alle de skjulte komponenter på siden blive indlæst, når du åbner hovedgrænsefladen, og alle komponenter kalder deres tilsvarende interface-tjenester, ofte behøver vi ikke at se al informationen, hvilket er et stort ressourcespild og også kan få hovedgrænsefladen til at loade langsomt, hvilket påvirker brugeroplevelsen。
Der er to måder at dynamisk belaste komponenter i ng på:
Indlæs allerede deklarerede komponenter: Brug ComponentFactoryResolver til at gengive en instans af en komponent til en anden komponentvisning;
Opret og indlæs komponenter dynamisk: Brug ComponentFactory og Compiler til at oprette og gengive komponenter
Ifølge vores behov udvikles de enkelte komponenter på forhånd og skal vises på samme komponent. Så den første måde opfylder vores krav.
For dynamisk at indlæse komponenter ved hjælp af ComponentFactoryResolver, skal du forstå følgende koncepter:
- ViewChild: Property decorator, hvorigennem du kan få de tilsvarende elementer på visningen;
- ViewContainerRef: En view-container, hvor komponenter kan oprettes og slettes;
- ComponentFactoryResolver: En komponentparser, der kan gengive én komponent på en visning af en anden.
Lad os først se på renderingerne, klik på modal1-knappen for dynamisk at indlæse modal1-komponenten, og klik på modal2-knappen for dynamisk at indlæse modal2-komponenten.
Først skaber vi et vinkelprojekt.
Opret 4 komponenter, nemlig indeks, modal1, modal2 og modal3, hvoraf modal1 og modal2 er vores dynamisk belastede komponenter.
Indekskomponent
html:
TS:
modal1-komponent
html:
TS:
modal2-komponent
html:
TS:
modal3-komponent
html:
TS:
Vi trykte deres navne på konstruktøren for 3 modaler.
modal1 og modal2 indlæses begge dynamisk, kun når knappen trykkes for at indlæse, bliver eksekveringskonstruktøren aktiveret, modal3 bruger ikke dynamisk indlæsning, og efter at forældregrænsefladen er indlæst, vil modal3-grænsefladekonstruktøren blive udført straks.
På denne måde kan du se fordelene ved dynamisk indlæsning, og den vil ikke indlæses, hvis du ikke bruger den, ligesom doven indlæsning i C#.
Kildekode-download:
Turister, hvis I vil se det skjulte indhold i dette indlæg, så vær venlig Svar
Ressourcer:Hyperlink-login er synlig.
|
Opslået på 29/05/2020 16.40.00
|
|
|
|
Udlejer|
Opslået på 24/07/2020 17.52.58
|
Opslået på 26/10/2022 17.27.19
|
