Šablóna komponentu nemusí byť vždy pevne stanovená. Vaša aplikácia možno bude musieť počas behu načítať nové komponenty.
Scenáre použitia:
1. Načítavanie stránok načítava rôzne komponenty podľa rôznych parametrov, pričom sa zobrazujú rôzne efekty
2. Stránka je zložená z viacerých prvkov, nie všetky musia byť zobrazené na začiatku, a po kliknutí používateľa sa zobrazia konkrétne informácie, ako napríklad: záložky, dynamické vyskakovacie modálne okná a podobne.
Scenár použitia tohto článku je 2, len si predstavte,Ak nepoužívate dynamické načítavanie, pri otvorení hlavného rozhrania sa načítajú všetky skryté komponenty stránky a všetky komponenty volajú svoje príslušné rozhranie, často nemusíme vidieť všetky informácie, čo je veľká strata zdrojov a môže to tiež spôsobiť, že hlavné rozhranie sa načíta pomaly, čo ovplyvní používateľský zážitok。
Existujú dva spôsoby, ako dynamicky načítať komponenty v ng:
Načítať už deklarované komponenty: Použite ComponentFactoryResolver na vykreslenie inštancie komponentu do iného pohľadu komponentu;
Dynamicky vytvárajte a načítavajte komponenty: Použite ComponentFactory a Compiler na tvorbu a renderovanie komponentov
Podľa našich potrieb sú jednotlivé komponenty vyvíjané vopred a musia byť zobrazené na tom istom komponente. Takže prvý spôsob spĺňa naše požiadavky.
Na dynamické načítanie komponentov pomocou ComponentFactoryResolver musíte rozumieť nasledujúcim konceptom:
- ViewChild: Property decorator, cez ktorý môžete získať zodpovedajúce prvky na pohľade;
- ViewContainerRef: View-kontajner, v ktorom je možné vytvárať a mazať komponenty;
- ComponentFactoryResolver: Parser komponentov, ktorý dokáže vykresliť jednu komponentu v zobrazení inej.
Najprv sa pozrime na renderovania, kliknite na tlačidlo modal1 na dynamické načítanie komponentu modal1 a kliknite na tlačidlo modal2 na dynamické načítanie komponentu modal2.
Najprv vytvoríme angular projekt.
Vytvorte 4 komponenty, konkrétne index, modal1, modal2 a modal3, z ktorých modal1 a modal2 sú naše dynamicky načítané komponenty.
Indexová zložka
html:
TS:
Modal1 komponent
html:
TS:
Modal2 komponent
html:
TS:
Modal3 komponent
html:
TS:
Ich mená sme vytlačili na konštruktor pre 3 modály.
Modal1 aj Modal2 sa dynamicky načítavajú, iba keď sa klikne tlačidlo na načítanie, spustí sa vykonávací konštruktor, Modal3 nepoužíva dynamické načítavanie, po načítaní rodičovského rozhrania sa konštruktér rozhrania Modal3 spustí okamžite.
Týmto spôsobom vidíte výhody dynamického načítavania, ktoré sa nenačíta, ak ho nepoužívate, podobne ako lenivé načítavanie v C#.
Stiahnutie zdrojového kódu:
Turisti, ak chcete vidieť skrytý obsah tohto príspevku, prosím. Odpoveď
Zdroje:Prihlásenie na hypertextový odkaz je viditeľné.
|
Zverejnené 29. 5. 2020 16:40:00
|
|
|
|
Prenajímateľ|
Zverejnené 24. 7. 2020 17:52:58
|
Zverejnené 26. 10. 2022 17:27:19
|
