Szablon komponentu nie zawsze będzie stały. Twoja aplikacja może potrzebować załadować nowe komponenty podczas działania.
Scenariusze użycia:
1. Ładowanie stron ładuje różne komponenty zgodnie z różnymi parametrami, pokazując różne efekty
2. Strona składa się z wielu elementów, nie wszystkie muszą być wyświetlane na początku, a po kliknięciu użytkownika pojawią się konkretne informacje, takie jak: zakładki kart, dynamiczne okienka modalne itp.
Scenariusz użycia tego artykułu jest następujący: 2, wyobraź sobie,Jeśli nie używasz dynamicznego ładowania, po otwarciu głównego interfejsu wszystkie ukryte komponenty strony zostaną załadowane, a wszystkie komponenty wywołają odpowiadające im usługi interfejsu, często nie musimy widzieć wszystkich informacji, co jest ogromnym marnotrawstwem zasobów i może też powodować wolne ładowanie głównego interfejsu, co wpływa na doświadczenie użytkownika。
Istnieją dwa sposoby dynamicznego ładowania składowych w ng:
Załaduj już zadeklarowane komponenty: Użyj ComponentFactoryResolver, aby wyrenderować instancję komponentu do innego widoku komponentu;
Dynamicznie twórz i ładuj komponenty: Użyj ComponentFactory i Compiler do tworzenia i renderowania komponentów
Zgodnie z naszymi potrzebami, poszczególne elementy są rozwijane wcześniej i muszą być wyświetlane na tym samym komponencie. Więc pierwszy sposób spełnia nasze wymagania.
Aby dynamicznie ładować komponenty za pomocą ComponentFactoryResolver, musisz zrozumieć następujące koncepcje:
- ViewChild: Property demontator, dzięki któremu możesz uzyskać odpowiednie elementy widoku;
- ViewContainerRef: Kontener widokowy, w którym można tworzyć i usuwać komponenty;
- ComponentFactoryResolver: Parser komponentów, który może renderować jeden komponent w widoku innego.
Najpierw przyjrzyjmy się renderom, kliknij przycisk modal1, aby dynamicznie załadować komponent modal1, oraz kliknij przycisk modal2, aby dynamicznie załadować komponent modal2.
Najpierw tworzymy projekt angularny.
Stwórz 4 komponenty: indeks, modal1, modal2 i modal3, z których modal1 i modal2 są naszymi dynamicznie ładowanymi komponentami.
Komponent indeksowy
html:
TS:
Komponent modal1
html:
TS:
Komponent modal2
html:
TS:
Komponent Modal3
html:
TS:
Wydrukowaliśmy ich nazwy na konstruktorze dla 3 modali.
Modal1 i Modal2 są dynamicznie ładowane, tylko gdy klikniesz przycisk do załadowania, uruchamiany jest konstruktor wykonawczy, Modal3 nie używa dynamicznego ładowania, po załadowaniu interfejsu nadrzędnego konstruktor interfejsu Modal3 jest uruchamiany natychmiast.
W ten sposób można zobaczyć zalety dynamicznego ładowania i nie będzie ono ładowane, jeśli go nie używasz, podobnie jak leniwe ładowanie w C#.
Pobranie kodu źródłowego:
Turyści, jeśli chcecie zobaczyć ukrytą zawartość tego wpisu, proszę Odpowiedź
Zasoby:Logowanie do linku jest widoczne.
|
Opublikowano 29.05.2020 16:40:00
|
|
|
|
Ziemianin|
Opublikowano 24.07.2020 17:52:58
|
Opublikowano 26.10.2022 17:27:19
|
