Angular Academy · Lektion

Lägen för vyinkapsling

Jämför Emulated, None och ShadowDom.

Lektion 2 av 413 steg

Lägen för vyinkapsling är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad är vyinkapsling?

Vyinkapsling styr hur en komponents stilar isoleras från resten av sidan. Angular erbjuder tre lägen via egenskapen encapsulation.

Ställa in läget

Ställ in läget med enumen ViewEncapsulation i dekoratorn @Component.

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

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

Emulated (standard)

Emulated är standardläget. Angular simulerar omfattade stilar genom att lägga till unika attribut på element och selektorer, utan att använda den inbyggda Shadow DOM.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Så fungerar Emulated

Läget Emulated skriver om selektorer med genererade attribut och ger därmed omfattning som fungerar i alla webbläsare utan krav på stöd för Shadow DOM.

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

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

None

None inaktiverar inkapsling helt. Komponentens stilar blir globala och kan påverka alla element på sidan.

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

När ska None användas?

Använd None sparsamt, till exempel för att definiera delade temaregler från en komponent. Var uppmärksam på att stilar kan krocka globalt.

ShadowDom

ShadowDom använder webbläsarens inbyggda Shadow DOM för att verkligen isolera komponentens uppmärkning och stilar.

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

Så skiljer sig ShadowDom

Med ShadowDom renderas komponenten inuti en riktig shadow root. Globala stilar tränger inte in, och komponentens stilar läcker inte ut, vilket ger den starkaste isoleringen.

Jämförelse av stiläcka

Emulated förhindrar att stilar läcker ut, men globala stilar kan fortfarande rikta in sig på element. None erbjuder ingen isolering. ShadowDom blockerar båda riktningarna helt.

Välja läge

Använd Emulated i nästan alla fall. Använd ShadowDom för helt isolerade widgetar och None endast för avsiktligt globala stilar.

Inkapsling och globala stilar

Kom ihåg att den globala styles.css alltid gäller oavsett läge, utom inuti en ShadowDom-komponent, där globala stilar inte når fram.

Snabbkontroll

Testa din förståelse av lägena för vyinkapsling.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Angular erbjuder tre inkapslingslägen: Emulated (standard, simulerad omfattning), None (globala stilar) och ShadowDom (inbyggd isolering). Emulated passar i de flesta fall, medan ShadowDom ger den starkaste isoleringen.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lägen för vyinkapsling” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Lägen för vyinkapsling”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lägen för vyinkapsling”?

Jämför Emulated, None och ShadowDom. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Lägen för vyinkapsling”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy