Angular Academy · Lektion

Modi der View-Kapselung

Vergleichen Sie Emulated, None und ShadowDom.

Modi der View-Kapselung 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.

Was ist View Encapsulation?

View Encapsulation steuert, wie die Stile einer Komponente vom restlichen Seiteninhalt isoliert werden. Angular bietet über die Eigenschaft encapsulation drei Modi.

Den Modus festlegen

Legen Sie den Modus mit dem Enum ViewEncapsulation im Decorator @Component fest.

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-card",
  encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}

Emulated (Standard)

Emulated ist der Standardmodus. Angular simuliert bereichsbezogene Stile, indem eindeutige Attribute zu Elementen und Selektoren hinzugefügt werden, ohne das native Shadow DOM zu verwenden.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

So funktioniert Emulated

Der Modus Emulated schreibt Selektoren mit generierten Attributen um und ermöglicht dadurch eine Bereichsbegrenzung in allen Browsern, ohne dass Unterstützung für Shadow DOM erforderlich ist.

/* you write */
.title { color: blue; }

/* angular emits */
.title[_ngcontent-xyz] { color: blue; }

None

None deaktiviert die Kapselung vollständig. Die Stile der Komponente werden global und können jedes Element auf der Seite beeinflussen.

@Component({
  encapsulation: ViewEncapsulation.None,
  styles: [".title { color: red; }"]
})
// .title now applies app-wide

Wann Sie None verwenden sollten

Verwenden Sie None sparsam, zum Beispiel um gemeinsame Theme-Regeln aus einer Komponente heraus zu definieren. Beachten Sie, dass globale Stilkonflikte entstehen können.

ShadowDom

ShadowDom verwendet das native Shadow DOM des Browsers, um das Markup und die Stile der Komponente tatsächlich zu isolieren.

@Component({
  selector: "app-widget",
  encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}

Der Unterschied bei ShadowDom

Bei ShadowDom wird die Komponente innerhalb einer echten Shadow Root gerendert. Globale Stile dringen nicht ein, und die Stile der Komponente treten nicht nach außen, wodurch die stärkste Isolation entsteht.

Vergleich der Stilweitergabe

Emulated verhindert das Austreten von Stilen, globale Stile können jedoch weiterhin auf Elemente zielen; None bietet keine Isolation; ShadowDom blockiert beide Richtungen vollständig.

Den passenden Modus wählen

Verwenden Sie für fast alle Fälle Emulated. Nutzen Sie ShadowDom für vollständig isolierte Widgets und None nur für bewusst globale Stile.

Kapselung und globale Stile

Beachten Sie, dass das globale styles.css unabhängig vom Modus immer angewendet wird – außer innerhalb einer ShadowDom-Komponente, wo globale Stile nicht hingelangen.

Schnelltest

Testen Sie Ihr Verständnis der Modi für View Encapsulation.

Zusammenfassung

Angular bietet drei Modi für die Kapselung: Emulated (Standard, simulierte Bereichsbegrenzung), None (globale Stile) und ShadowDom (native Isolation). Emulated eignet sich für die meisten Fälle; ShadowDom bietet die stärkste Isolation.

Häufig gestellte Fragen

Ist die Lektion „Modi der View-Kapselung“ kostenlos?

Ja — der vollständige Text von „Modi der View-Kapselung“ 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 „Modi der View-Kapselung“?

Vergleichen Sie Emulated, None und ShadowDom. 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 „Modi der View-Kapselung“?

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