Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.eine Inhaltsprojektion

Wenn Sie Angular JS gelernt haben, bevor Sie zu Angular gewechselt sind, sind Sie möglicherweise mit dem Begriff Transklusion vertraut. Auf der anderen Seite, wenn Sie keine Ahnung haben, was Transklusion ist, ist der neue Name dafür in Angular Content Projection, und das werden wir in diesem Beitrag behandeln.

Die Inhaltsprojektion besteht darin, einen Teil des DOM-Baums von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben.

Es ist perfekt, um wiederverwendbare Komponenten wie Dialoge, Modals, Tabs und dergleichen zu erstellen.

Hier ist ein Beispiel, in dem ich ein Popup-Fenster mit anpassbarem Inhalt erstellen und diesen Inhalt wie folgt an das Popup „übergeben“ möchte:

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

Beachten Sie, dass ich dieser Komponente auch einen Titel als Eingabe übergebe. Standardmäßig würde der obige Code den Inhalt nicht projizieren. Um die Inhaltsprojektion zu ermöglichen, müssen wir die Direktive ng-content irgendwo in der Vorlage der untergeordneten Komponente hinzufügen:

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-content funktioniert sehr ähnlich wie router-outlet: Es ist eine Direktive, die angibt, wo dynamischer Inhalt geladen werden soll.

Eine andere Möglichkeit, die Inhaltsprojektion zu umgehen, besteht darin, dass der generierte HTML-Code von der übergeordneten Komponente in die HTML-Vorlage der untergeordneten Komponente „ausgeschnitten und eingefügt“ wird und dass HTML dort „eingefügt“ wird, wo sich ng-content befindet.

Sobald wir den obigen Code haben, wird das Popup wie folgt gerendert:

der vollständige Code für dieses Beispiel in diesem Stackblitz:

Kann dieser projizierte Inhalt dynamisch sein?

Natürlich kann es! Sie können beliebige Datenbindungen, Direktiven oder sogar andere Komponenten verwenden, wenn Sie möchten.

Hier ist ein Beispiel:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

Und das alles funktioniert einwandfrei:

en vollständigen Code für dieses zweite Beispiel finden Sie in diesem Stackblitz:

Was ist, wenn ich mehrere Dinge an verschiedenen Orten projizieren möchte?

Freut mich, dass du gefragt hast. Dies wird als Multi-Slot-Inhaltsprojektion bezeichnet.

Nehmen wir an, wir möchten unser Popup-Fenster so ändern, dass wir sowohl einen benutzerdefinierten Text als auch eine benutzerdefinierte Fußzeile übergeben können.

Wir werden zwei ng-content-Direktiven in dieser Komponente verwenden, und der Schlüssel ist, diese beiden Slots dazu zu bringen, einen bestimmten Teil des projizierten Inhalts mit der folgenden Syntax auszuwählen:

<div class="modalW-body">
<ng-content select="body"></ng-content>
</div><div class="modalW-footer">
<ng-content select="footer"></ng-content>
</div>

Um nun Inhalte an diese spezifischen Slots zu übergeben, muss ich nur Tags verwenden, die den oben angegebenen Auswahlkriterien entsprechen:

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

ass ich body und Footer verwendet habe, weil es sich um tatsächliche HTML-Elemente handelt, die in diesem Kontext sinnvoll sind. Sie können Elemente jedoch nach CSS-Klasse, Attributnamen oder nach Belieben auswählen. Ich muss es nicht genau so machen, wie ich es hier getan habe.

Wie Sie sehen können, funktioniert es gut:

Ich habe eine andere Farbe zur Fußzeile, damit wir sehen können, dass der Inhalt im rechten Steckplatz übertragen wurde

Der vollständige Code für dieses endgültige Beispiel befindet sich in diesem Stackblitz:

Mein Name ist Alain Chautard. Ich bin ein Google Developer-Experte für Angular sowie Gründungsberater und Trainer bei Angular Training, wo ich Entwicklungsteams helfe, mit Angular zu lernen und sich damit vertraut zu machen.

Brauchen Sie Hilfe mit Angular? Lass uns etwas Zeit zum Reden einplanen.

Wenn Ihnen dieser Beitrag gefallen hat, klatschen Sie bitte dafür oder teilen Sie ihn. Ihre Hilfe wird immer geschätzt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.