Šablona komponenty nebude vždy pevně daná. Vaše aplikace možná bude muset během běhu načíst nové komponenty.
Scénáře použití:
1. Načítání stránky načítá různé komponenty podle různých parametrů, což ukazuje různé efekty
2. Stránka se skládá z více prvků, ne všechny musí být zobrazeny na začátku, a po kliknutí uživatele se zobrazí konkrétní informace, jako například: záložky, dynamické vyskakovací modální okna atd.
Scénář použití tohoto článku je 2, jen si představte,Pokud nepoužíváte dynamické načítání, při otevření hlavního rozhraní se načtou všechny skryté komponenty stránky a všechny komponenty volají své odpovídající služby rozhraní, často nemusíme vidět všechny informace, což je velká ztráta zdrojů a může také způsobit pomalé načítání hlavního rozhraní, což ovlivňuje uživatelský zážitek。
Existují dva způsoby, jak dynamicky načítat komponenty v ng:
Načíst již deklarované komponenty: Použijte ComponentFactoryResolver k vykreslení instance komponenty do jiného zobrazení komponenty;
Dynamicky vytvářejte a načítajte komponenty: Použijte ComponentFactory a Compiler k vytváření a vykreslování komponent
Podle našich potřeb jsou jednotlivé komponenty vyvíjeny předem a musí být zobrazeny na stejné komponentě. Takže první způsob splňuje naše požadavky.
Pro dynamické načítání komponent pomocí ComponentFactoryResolver musíte rozumět následujícím konceptům:
- ViewChild: Property decorator, přes kterého můžete získat odpovídající prvky na pohledu;
- ViewContainerRef: Zobrazovací kontejner, ve kterém lze vytvářet a mazat komponenty;
- ComponentFactoryResolver: Parser komponent, který dokáže vykreslit jednu komponentu v pohledu na jinou.
Nejprve se podívejme na renderingy, klikněte na tlačítko modal1 pro dynamické načtení komponenty modal1 a klikněte na tlačítko modal2 pro dynamické načtení komponenty modal2.
Nejprve vytvoříme angularní projekt.
Vytvořte 4 komponenty, konkrétně index, modal1, modal2 a modal3, z nichž modal1 a modal2 jsou naše dynamicky načítané komponenty.
indexová složka
html:
TS:
Modal1 komponenta
html:
TS:
Modal2 komponenta
html:
TS:
Komponenta Modal3
html:
TS:
Jejich jména jsme vytiskli na konstruktor pro 3 modály.
Modal1 i Modal2 se dynamicky načítají, pouze když je tlačítko načteno, spustí se konstruktor vykonávání, Modal3 nepoužívá dynamické načítání, po načtení rodičovského rozhraní se konstruktor rozhraní Modal3 spustí okamžitě.
Tímto způsobem vidíte výhody dynamického načítání, a pokud ho nepoužijete, nebude se načítat, podobně jako při líném načítání v C#.
Stažení zdrojového kódu:
Turisté, pokud chcete vidět skrytý obsah tohoto příspěvku, prosím Odpověď
Prostředky:Přihlášení k hypertextovému odkazu je viditelné.
|
Zveřejněno 29.05.2020 16:40:00
|
|
|
|
Pronajímatel|
Zveřejněno 24.07.2020 17:52:58
|
Zveřejněno 26.10.2022 17:27:19
|
