Die Vorlage einer Komponente ist nicht immer festgelegt. Deine App muss möglicherweise während der Laufzeit neue Komponenten laden.
Anwendungsszenarien:
1. Seitenladen lädt verschiedene Komponenten entsprechend unterschiedlichen Parametern und zeigt unterschiedliche Effekte
2. Die Seite besteht aus mehreren Elementen, nicht alle müssen zu Beginn angezeigt werden, und spezifische Informationen werden nach dem Klick angezeigt, wie zum Beispiel: Tab-Tabs, dynamische Pop-up-Modalboxen usw.
Das Anwendungsszenario dieses Artikels ist 2, stellen Sie sich einfach vor,Wenn du kein dynamisches Laden nutzt, werden beim Öffnen der Hauptoberfläche alle versteckten Komponenten der Seite geladen und alle Komponenten rufen ihre entsprechenden Interface-Dienste auf, oft müssen wir nicht alle Informationen sehen, was eine große Ressourcenverschwendung ist und auch dazu führen kann, dass die Hauptoberfläche langsam lädt, was das Nutzererlebnis beeinträchtigt。
Es gibt zwei Möglichkeiten, Komponenten dynamisch in ng zu laden:
Laden Sie bereits deklarierte Komponenten: Verwenden Sie ComponentFactoryResolver, um eine Instanz einer Komponente in eine andere Komponentenansicht zu rendern;
Erstellen und laden Sie Komponenten dynamisch: Verwenden Sie ComponentFactory und Compiler, um Komponenten zu erstellen und zu rendern
Je nach unseren Bedürfnissen werden die einzelnen Komponenten im Voraus entwickelt und müssen auf derselben Komponente angezeigt werden. Der erste Weg erfüllt also unsere Anforderungen.
Um Komponenten dynamisch mit ComponentFactoryResolver zu laden, müssen Sie die folgenden Konzepte verstehen:
- ViewChild: Property Decorator, über den Sie die entsprechenden Elemente in der Ansicht erhalten können;
- ViewContainerRef: Ein View-Container, auf dem Komponenten erstellt und gelöscht werden können;
- ComponentFactoryResolver: Ein Komponentenparser, der eine Komponente auf einer Ansicht einer anderen rendern kann.
Schauen wir uns zuerst die Renderings an: Klicken Sie auf die modal1-Taste, um die modal1-Komponente dynamisch zu laden, und klicken Sie auf die modal2-Taste, um die modal2-Komponente dynamisch zu laden.
Zuerst erstellen wir ein Angular-Projekt.
Erstellen Sie 4 Komponenten, nämlich Index, Modal1, Modal2 und Modal3, von denen Modal1 und Modal2 unsere dynamisch geladenen Komponenten sind.
Indexkomponente
HTML:
TS:
modal1-Komponente
HTML:
TS:
Modal2-Komponente
HTML:
TS:
modal3-Komponente
HTML:
TS:
Wir haben ihre Namen für drei Modals auf den Konstruktor gedruckt.
modal1 und modal2 werden beide dynamisch geladen, nur wenn der Button zum Laden geklickt wird, wird der Ausführungskonstruktor ausgelöst, modal3 verwendet kein dynamisches Laden, nachdem die übergeordnete Schnittstelle geladen ist, wird der modal3-Schnittstellenkonstruktor sofort ausgeführt.
So erkennt man die Vorteile des dynamischen Ladens, und es wird nicht geladen, wenn man es nicht nutzt, ähnlich wie beim lazy loading in C#.
Quellcode-Download:
Touristen, wenn ihr den versteckten Inhalt dieses Beitrags sehen wollt, bitte Antwort
Betriebsmittel:Der Hyperlink-Login ist sichtbar.
|
Veröffentlicht am 29.05.2020 16:40:00
|
|
|
|
Vermieter|
Veröffentlicht am 24.07.2020 17:52:58
|
Veröffentlicht am 26.10.2022 17:27:19
|
