Detaillierte Erklärung der dynamischen Angular-Komponenten

Anwendungsszenarien

Lassen Sie uns zunächst die Verwendungsszenarien dynamischer Komponenten klären. Um Komponenten dynamisch zu laden, wenn der Code ausgeführt wird, muss der Code, vereinfacht ausgedrückt, basierend auf bestimmten Umständen (z. B. Benutzervorgängen, Anforderung von Ergebnissen vom Backend) bestimmen, wo bestimmte Komponenten geladen werden sollen. Diese Komponenten sind nicht statisch (nicht festgelegt).

Das auf der offiziellen Website angeführte Beispiel besagt, dass beim Erstellen eines dynamischen Werbebanners ständig neue Werbekomponenten eingeführt werden und es offensichtlich unrealistisch ist, eine Vorlage zu verwenden, die nur statische Komponentenstrukturen unterstützt.

Nehmen wir ein weiteres gängiges Beispiel, das dynamische Popup-Fenster. Die angezeigten Komponenten sind unsicher und werden ständig aktualisiert. Hier und da erscheint ein Kauffeld und dort ein Stilauswahlfeld. Die statische Komponentenstrukturvorlage kann den wachsenden Anforderungen der Massen nicht gerecht werden.

So erreichen Sie es

Dann bekommen wir einen Überblick darüber, was zur Implementierung dynamischer Komponenten erforderlich ist.

1. Wo dynamische Komponenten platziert werden sollen

Wir müssen wissen, wo wir die dynamische Komponente hinzufügen müssen, also wo der Ankerpunkt liegt. Was kann also zum Laden von Komponenten verwendet werden?

Sie fragen sich vielleicht: „Wird die Komponente nicht auf den Anker geladen? Ist der Anker nicht ein DOM-Knoten?“ Natürlich wird es in den DOM-Knoten geladen.

Lassen Sie uns zunächst die gängigen Methoden zum Betrieb des DOM in Angular überprüfen. Denken Sie nicht an die native JS-Methode zum Betrieb des DOM. Glauben Sie, dass sie Ihnen ein Objekt zurückgeben kann, das Angular-Komponenten laden kann?

Angular bietet eine Technologie namens DOM Query, die hauptsächlich aus den Dekoratoren @ViewChild und @ViewChildren stammt, die über dieselben Grundfunktionen verfügen.

@ViewChild: Gibt eine einzelne Referenz auf das erste Element oder die erste Direktive im DOM der Ansicht zurück, die dem Selektor entspricht.

@ViewChildren: Gibt mehrere Referenzen zurück, die von einem QueryList-Objekt umschlossen sind, und durchsucht das DOM der Ansicht nach allen Elementen oder Anweisungen, die dem Selektor entsprechen.

Grundlegende Syntax:

@ViewChild([Referenz aus Vorlage], {read: [Referenztyp]});

Die von der DOM-Abfragetechnologie gefundenen Objekte werden in drei Kategorien unterteilt:

ElementRef: wenn es auf einem einfachen HTML-Element wie span montiert ist;

TemplateRef: ob es auf einem Vorlagenelement montiert ist;

ViewContainerRef: kann nicht abgeleitet werden, normalerweise muss der Programmierer es beim Lesen angeben, jedes DOM-Element kann als Ansichtscontainer verwendet werden.

Aus der API der offiziellen Website können wir ersehen, dass nur ViewContainerRef ein Container ist, der einer Komponente eine oder mehrere Ansichten anhängen kann, das heißt, nur er kann eine Komponente laden. Es ist jedoch zu beachten, dass es sich um ein DOM-Element (Container) handelt, das neue Komponenten als seine Geschwister (Knoten) behandeln kann. Es handelt sich um eine Bruderbeziehung und nicht um eine Eltern-Kind-Beziehung.

OK, wir haben festgestellt, dass ViewContainerRef zum Laden des Containers verwendet wird. Es gibt zwei Möglichkeiten, ViewContainerRef abzurufen:

Die erste Möglichkeit besteht darin, @ViewChild über die obige DOM-Abfrage abzufragen.

<ng-container #addComp></ng-container>
@ViewChild('addComp', {lesen: ViewContainerRef}) adComp:ViewContainerRef;

Das zweite ist das Beispiel auf der offiziellen Website, bei dem die Abhängigkeitsinjektion verwendet wird

importiere { Direktive, ViewContainerRef } von '@angular/core';

@Richtlinie({
Selektor: '[ad-host]',
})
Exportklasse AdDirective {
Konstruktor(öffentliche viewContainerRef: ViewContainerRef) { }
}

Der Ankerpunkt wird auf ng-template gesetzt und der ViewContainerRef wird durch Direktiveninjektion erhalten

Vorlage: `
<div Klasse="Anzeigenbanner-Beispiel">
<h3>Werbung</h3>
<ng-template ad-host></ng-template>
</div>

2. So erhalten Sie die Instanz der Komponente

Das Laden einer Komponente in eine Ansicht ist nicht so einfach wie das Instanziieren mit einer neuen Methode und das anschließende Anhängen mit Anhängen, Einfügen usw. Dynamische Komponenten müssen vorab vom Compiler kompiliert und gespeichert und dann mit ComponentFactory gekapselt werden. Nachfolgende Komponenteninstanzen müssen über ComponentFactory erstellt werden. Sie können diesen Artikel [Übersetzung] Was Sie über dynamische Angular-Komponenten wissen müssen lesen. Darin wird jedoch erwähnt, dass der Modullader SystemJsNgModuleLoader veraltet ist.

ComponentFactoryResolver ist ein einfaches Register, das Komponenten generierten Klassen zuordnet, die eine ComponentFactory zum Erstellen von Komponenteninstanzen verwenden kann. Damit kann eine Factory für einen bestimmten Komponententyp abgerufen und dann mit der create()-Methode der Factory eine Komponente dieses Typs erstellt werden.

Schauen wir uns den Beispielcode der offiziellen Website an. Das Folgende ist nicht der vollständige Code

//ComponentFactoryResolver einfügen
Konstruktor(privater componentFactoryResolver: ComponentFactoryResolver) { }
 
Komponente laden() {
......
// Holen Sie sich die generierte ComponentFactory, die zum Erstellen einer Anzeigenkomponenteninstanz verwendet werden kann
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 
//Container zum Laden der Komponenten abrufen const viewContainerRef = this.adHost.viewContainerRef;
: viewContainerRef.clear();
 
//Setzen Sie die Komponente in den Container und übergeben Sie ihr einige Parameter const componentRef = viewContainerRef.createComponent(componentFactory);
(<Anzeigenkomponente>componentRef.instance).data = AnzeigeItem.data;
}

Glauben Sie, dass das das Ende ist? Glauben Sie, dass der auf diese Weise geschriebene Code ausgeführt werden kann? Zu jung, lassen Sie sich von der Frontwelle einige Punkte verraten, auf die Sie achten sollten:

Komponenten, Anweisungen und Pipes in Angular sind alle in Modulen gekapselt. Nehmen wir Komponenten als Beispiel: Wenn Sie Komponenten aus anderen Modulen verwenden möchten, müssen die anderen Module diese Komponente exportieren und Sie müssen auch andere Module in Ihr eigenes Modul importieren. Denken Sie also daran, die Anweisungen in den Beispielen der offiziellen Website zu importieren und zu exportieren.

Wenn es sich um eine dynamische Komponente handelt, müssen Sie die Komponente in der Eigenschaft entryComponents des Moduls registrieren, aber Sie müssen sie nicht exportieren. Sie müssen das Modul trotzdem importieren.

Oben finden Sie eine ausführliche Erläuterung der dynamischen Angular-Komponenten. Weitere Informationen zu dynamischen Angular-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!