In Angular ist eine Komponente eine spezielle Direktive, und ihre besondere Eigenschaft ist, dass sie eine eigene Vorlage (HTML) und einen eigenen Stil (CSS) besitzt. Daher kann die Verwendung von Komponenten unseren Code stark entkoppelt, wiederverwendbar und leicht erweiterbar machen. Die üblichen Komponenten sind wie folgt definiert:
demo.component.ts:
demo.component.html:
demo.component.scss:
Wenn wir die Komponente referenzieren, wird der geparste Inhalt der Komponente dargestellt:
Angenommen, es besteht die Notwendigkeit, dass die Komponente extern projizierte Inhalte akzeptiert, was bedeutet, dass die Komponente mehr präsentiert als nur das, was sie definiert. Derzeit ist der Protagonist dieses Artikels eingeladen.ng-Inhalt。
Einfache Projektion
Fangen wir mit dem einfachsten an: Fügen wir die modifizierten demo.component.html und demo.component.scss zu demo.component.html hinzu, wie folgt:
demo.component.html:
demo.component.scss:
Zur Wirkung wird die Hintergrundfarbe des Behälters bewusst als orange definiert.
An diesem Punkt können wir Inhalte von außen casten, wenn wir auf die Komponente referenzieren, und der externe Inhalt wird im orangen Bereich angezeigt:
Zielprojektion
Wenn es mehrere gleichzeitig gibt, wie werden die externen Inhalte dann projiziert?
Schauen wir uns zuerst ein Beispiel an: Zur Unterscheidung habe ich ein blaues Feld, das modifizierte demo.component.html und demo.component.scss wie folgt hinzugefügt:
demo.component.html:
demo.component.scss:
Zur Referenz auf die Komponente:
An diesem Punkt sehen wir, dass der externe Inhalt auf den blauen Bereich projiziert wird:
Natürlich, wenn man die orangefarbene Vorwahl nach der blauen Vorwahl setzt, wird der externe Inhalt auf den orangen Bereich projiziert:
Aus dem obigen Beispiel sehen wir, dass, wenn es auch ein einfaches gibt, der externe Inhalt im letzten Teil der Komponentenvorlage projiziert wird.
Angesichts dieses Problems fragen wir uns vielleicht, ob wir externe Inhalte gezielt projizieren können? Die Antwort ist natürlich ja.
Um damit umzugehen, unterstützen Sie einenauswählenAttribute, die es ermöglichen, spezifische Inhalte an einem bestimmten Ort zu projizieren. Diese Eigenschaft unterstützt CSS-Selektoren (Tag-Selektor, Klassenselektor, Attributselektor、... ) um das zu treffen, was du willst. Wenn kein select-Attribut auf ng-content gesetzt ist, erhält es den vollständigen Inhalt oder den Inhalt, der keinem anderen ng-content-Element entspricht.
Betrachtet man das Beispiel direkt, sind die modifizierten demo.component.html und demo.component.scss wie folgt:
demo.component.html:
demo.component.scss:
Wie du aus dem obigen Code sehen kannst, erhält der blaue Bereich den Teil des Tag-Headers, der rote Bereich den Teil der Div mit der Klasse "demo2", der grüne Bereich den Teil der Div mit dem Immobiliennamen "demo3", und der orangefarbene Bereich den Rest des externen Inhalts (start, ich bin der Inhalt des externen Embeds, ende).
Zur Referenz auf die Komponente:
An diesem Punkt sehen wir, dass der externe Inhalt in die angegebene Projektion projiziert wird.
Wissen erweitern
ngProjectAs
Jetzt wissen wir, dass die Select-Eigenschaft von ng-content es ermöglicht, anzugeben, dass externe Inhalte in ein gegebenes Projekt projiziert werden.
Um Inhalte korrekt basierend auf dem select-Attribut zu projizieren, gibt es eine Einschränkung – ob es sich um einen Tag-Header, eine Div mit der Klasse "demo2" oder eine Div mit dem Eigenschaftsnamen "demo3" handelt, diese Tags sind alle direkte Unterknoten des Komponenten-Tags.
Was würde passieren, wenn es nicht ein direkter Subknoten wäre? Ändern wir einfach den Code, der auf die Demo-Komponente-Komponente verweist, legen den Tag-Header in einen Div und ändern ihn wie folgt:
An diesem Punkt sehen wir, dass der Tab-Header-Teil des Inhalts nicht mehr in den blauen Bereich projiziert wird, sondern in den orangenen Bereich. Der Grund ist, dass <ng-content select="header"></ng-content> nicht mit dem vorherigen Tag-Header übereinstimmen kann, sodass dieser Teil des Inhalts auf den <ng-content></ng-content> orangen Bereich projiziert wird.
Um dieses Problem zu lösen, müssen wir die ngProjectAs-Eigenschaft verwenden, die auf jedes Element angewendet werden kann. Die Details sind wie folgt:
Durch Einstellung der ngProjectAs-Eigenschaft zeigt der Div, in dem sich der Tag-Header befindet, auf select="header", und der Teil des Tag-Headers wird auf den blauen Bereich projiziert:
<ng-content>"Generieren" Sie keine Inhalte
Mach ein Experiment
Um ein Experiment durchzuführen, definieren Sie zunächst eine Demo-Kind-Komponente:
Demo-Komponentenkomponente zu:
Dann in der Demo-Komponente, Cast, Demo-Kind-Komponente:
An diesem Punkt sehen wir in der Konsole, dass die Initialisierung der Demo-Kind-Komponenten abgeschlossen ist! Diese Worte. Aber wenn wir auf den Button klicken, um die Operationen zu wechseln, ist die Initialisierung der Demo-Kind-Komponente abgeschlossen! Sie wird nicht mehr gedruckt, was bedeutet, dass unsere Demo-Kind-Komponente nur einmal instanziiert wird – nie zerstört und neu erstellt.
Warum passiert das?
Ursachen des Auftretens
<ng-content> Es "produziert" keine Inhalte, sondern projiziert nur bestehende Inhalte. Man kann es sich als äquivalent zu node.appendChild(el) oder der $(node).append(el)-Methode in jQuery vorstellen: Mit diesen Methoden wird der Knoten nicht geklont, sondern einfach an seinen neuen Ort verschoben. Daher ist der Lebenszyklus der projizierten Inhalte an den Punkt gebunden, an dem er deklariert wird, nicht an Ort und Stelle angezeigt.
Dies erklärt auch die vorherige Frage aus dem Prinzip:Wenn es mehrere gleichzeitig gibt, wie werden die externen Inhalte dann projiziert?
Dieses Verhalten erfolgt aus zwei Gründen: Konsistenz und Leistung. Was "gewünschte Konsistenz" bedeutet, dass Sie als Entwickler das Verhalten Ihrer Anwendung anhand ihres Codes erraten können. Angenommen, ich habe folgenden Code geschrieben:
Offensichtlich wird die Demo-Kind-Komponente-Komponente einmal instanziiert, aber wenn wir jetzt eine Komponente aus einer Drittanbieter-Bibliothek verwenden:
Wenn eine Drittanbieter-Bibliothek den Lebenszyklus einer Demo-Kind-Komponente-Komponente kontrolliert, habe ich keine Möglichkeit zu wissen, wie oft sie instanziiert wurde. Der einzige Weg dazu ist, sich den Code von Drittanbieter-Bibliotheken anzusehen, um deren interne Verarbeitungslogik zu verstehen. Die Bedeutung, den Lebenszyklus einer Komponente an unsere Anwendungskomponenten statt an Wrapper zu verknüpfen, ist, dass Entwickler steuern können, dass Zähler nur einmal instanziiert werden, ohne den internen Code von Drittanbieter-Bibliotheken zu kennen.
Gründe für die Leistungist wichtiger. Da ng-content nur ein bewegtes Element ist, kann es zur Kompilierungszeit und nicht zur Laufzeit erfolgen, was die Arbeitsbelastung der eigentlichen Anwendung erheblich reduziert.
Workaround
Damit die Komponente die Instanziierung der projizierten Unterkomponenten steuern kann, können wir dies auf zwei Arten tun: durch Verwendung <ng-template> von Elementen und ngTemplateOutlets um unseren Inhalt herum oder durch Strukturdirektiven mit "*"-Syntax. Der Einfachheit halber verwenden wir <ng-template> im Beispiel Syntax.
Demo-Komponentenkomponente zu:
Dann fügen wir demo-kind-component in ng-template hinzu:
An diesem Punkt, wenn wir auf den Button zum Wechseln klicken, wird die Konsole ausgedrucktDemo-Kind-Komponenten-Initialisierung abgeschlossen!Diese Worte.
|
Veröffentlicht am 12.06.2019 10:14:39
|
|
|
|
Veröffentlicht am 14.06.2019 14:14:35