Angular Academy · Lektion

Multi-Slot-Projektion mit select

Inhalte in benannte Slots projizieren

Multi-Slot-Projektion mit select ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Mehrere Slots

Viele Komponenten benötigen mehrere Bereiche: einen Header, einen Body und einen Footer. Angular unterstützt dies mit Multi-Slot-Projection über das select-Attribut von <ng-content>.

Das select-Attribut

select nimmt einen CSS-Selektor entgegen. Jedes <ng-content select="..."> projiziert nur Nodes, die diesem Selektor entsprechen.

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

Nach Attribut auswählen

Attributselektoren sind das gängigste Muster, da sie im Markup des Consumers übersichtlich lesbar sind.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

Benannte Slots verwenden

Der Consumer versieht jedes Inhaltsstück mit dem passenden Attribut.

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

Nach Element oder Klasse auswählen

Sie können auch nach Elementnamen oder CSS-Klasse auswählen.

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

Der Catch-all-Slot

Ein <ng-content> ohne select erfasst alles, was keinem benannten Slot entspricht. Platzieren Sie ihn als Fallback an letzter Stelle.

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

Die Reihenfolge ist entscheidend

Angular wertet die Slots in der Reihenfolge der Vorlage aus. Jeder projizierte Node wird dem ersten passenden Slot zugewiesen. Platzieren Sie den Catch-all-Slot nach den spezifischen Selektoren, damit er nicht alles abfängt.

Selektoren kombinieren

CSS-Selektoren können kombiniert werden. select="button[primary]" wählt beispielsweise ein Button-Element mit einem primary-Attribut aus.

<ng-content select="button[primary]"></ng-content>

Eine Layout-Komponente

Hier sehen Sie eine Karte mit Header-, Body- und Footer-Slots sowie einem Catch-all-Slot.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

Jeder Node wird einmal projiziert

Ein projizierter Node entspricht nur einem Slot und wird genau einmal gerendert. Über Projection können Sie denselben Node nicht in zwei Slots klonen.

Slots individuell stylen

Da jeder Slot an einer eigenen DOM-Position liegt, können Sie Slots in formatierten Containern (Header/Footer) umschließen und jedem Bereich ein eigenes Erscheinungsbild geben.

Kurze Überprüfung

Testen Sie Ihr Wissen über Multi-Slot-Projection.

Zusammenfassung

Sie haben gelernt, Multi-Slot-Komponenten mit <ng-content select="..."> zu erstellen. Selektoren können auf Attribute, Elemente oder Klassen zielen; ein Slot ohne Auswahl ist der Catch-all-Slot, und die Reihenfolge bestimmt, welcher Slot gewinnt.

Häufig gestellte Fragen

Ist die Lektion „Multi-Slot-Projektion mit select“ kostenlos?

Ja — der vollständige Text von „Multi-Slot-Projektion mit select“ 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 „Multi-Slot-Projektion mit select“?

Inhalte in benannte Slots 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 2 von 4.

Wie lange dauert die Lektion „Multi-Slot-Projektion mit select“?

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