Angular Academy · Lektion

Content-Projektion in einen Slot

Inhalte mit ng-content projizieren

Content-Projektion in einen Slot ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Content Projection?

Content Projection ermöglicht es einer Komponente, Markup von ihrem übergeordneten Element zu empfangen und innerhalb ihrer eigenen Vorlage darzustellen. Es ist das Angular-Gegenstück zu „Slots“ in Web Components.

Das übergeordnete Element schreibt den Inhalt zwischen die Tags der Komponente, und die Komponente entscheidet, wo dieser Inhalt erscheint.

Warum Sie Content Projection benötigen

Wiederverwendbare Wrapper wie Karten, Dialoge und Panels kennen ihren Inhalt im Voraus nicht. Content Projection macht sie zu flexiblen Containern.

Erstellen Sie eine Karte einmal und füllen Sie sie mit beliebigem Inhalt.
Die Layout-Logik bleibt in der Komponente.
Der Inhalt bleibt beim Consumer.

Das ng-content-Element

Das <ng-content>-Element markiert die Stelle, an der projizierter Inhalt eingefügt wird. Eine Single-Slot-Konfiguration verwendet genau ein <ng-content> ohne select-Attribut.

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

Die Komponente verwenden

Alles, was das übergeordnete Element zwischen den Komponententags platziert, wird in den Slot projiziert.

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

Single Slot = ein Ausgabepunkt

Bei einem einzelnen unbenannten Slot werden alle projizierten Nodes in das eine <ng-content> eingefügt. Es gibt keine Filterung; die Reihenfolge bleibt genau so erhalten, wie das übergeordnete Element sie vorgibt.

Standardinhalt

Sie können Fallback-Markup innerhalb von <ng-content> platzieren. Modernes Angular rendert diesen Standardinhalt nur, wenn der Consumer nichts in diesen Slot projiziert.

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

Projizierten Inhalt stylen

Projizierter Inhalt gehört zur Ansicht des übergeordneten Elements und wird daher von dessen Styles formatiert, nicht von denen der Karte. Um von der Karte aus auf projizierte Nodes zuzugreifen, verwenden Sie ::ng-deep sparsam oder greifen Sie auf globale Styles zurück.

Inhalt und Ansicht

Angular unterscheidet zwischen Content Children (hineinprojiziert) und View Children (in der Vorlage deklariert). Das ist für Abfragen wie contentChild und viewChild wichtig.

icon = contentChild(IconComponent);

Lebenszyklus: ngAfterContentInit

Projizierter Inhalt ist verfügbar, nachdem ngAfterContentInit() ausgeführt wurde. Verwenden Sie diesen Hook (oder ngAfterContentChecked), um Content Children sicher auszulesen.

ngAfterContentInit() {
  console.log('Projected content ready');
}

Ein echtes Panel-Beispiel

Hier sehen Sie ein vollständiges wiederverwendbares Panel. Der Consumer kontrolliert den gesamten Inhalt, während das Panel den Rahmen vorgibt.

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

Häufiger Fehler

Wenn Sie dasselbe unbenannte <ng-content> zweimal platzieren, wird der Inhalt nicht dupliziert. Angular projiziert nur in den letzten passenden Slot. Wenn Sie mehrere Bereiche benötigen, verwenden Sie Multi-Slot-Projection.

Kurze Überprüfung

Testen Sie Ihr Verständnis der Single-Slot-Projection.

Zusammenfassung

Sie haben gelernt, dass Content Projection <ng-content> verwendet, um vom übergeordneten Element bereitgestelltes Markup innerhalb einer Komponente darzustellen. Single-Slot-Projection verwendet einen unbenannten Ausgabepunkt, der projizierte Inhalt gehört zur Ansicht des übergeordneten Elements und ist in ngAfterContentInit verfügbar.

Häufig gestellte Fragen

Ist die Lektion „Content-Projektion in einen Slot“ kostenlos?

Ja — der vollständige Text von „Content-Projektion in einen Slot“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Content-Projektion in einen Slot“?

Inhalte mit ng-content projizieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Content-Projektion in einen Slot“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy