Angular Academy · Oppitunti

Näkymän kapselointitilat

Vertailkaa tiloja Emulated, None ja ShadowDom.

Oppitunti 2/413 vaihetta

Näkymän kapselointitilat on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä näkymän kapselointi tarkoittaa?

Näkymän kapselointi määrittää, miten komponentin tyylit eristetään muusta sivusta. Angular tarjoaa kolme tilaa encapsulation-ominaisuuden kautta.

Tilan määrittäminen

Määritä tila ViewEncapsulation-enumeraatiolla @Component-dekoraattorissa.

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

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

Emulated (oletus)

Emulated on oletusarvo. Angular jäljittelee rajattuja tyylejä lisäämällä elementteihin ja valitsimiin yksilöllisiä attribuutteja käyttämättä natiivista Shadow DOMia.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Miten Emulated toimii

Emulated-tila muokkaa valitsimia generoitujen attribuuttien avulla. Näin saadaan rajaus, joka toimii kaikissa selaimissa ilman Shadow DOM -tuen vaatimuksia.

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

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

None

None poistaa kapseloinnin kokonaan käytöstä. Komponentin tyyleistä tulee yleisiä, ja ne voivat vaikuttaa mihin tahansa sivun elementtiin.

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

Milloin None-tilaa käytetään

Käytä None-tilaa harkiten, esimerkiksi kun määrität jaettuja teemasääntöjä yhdestä komponentista. Huomaa, että tyylit voivat olla ristiriidassa keskenään kaikkialla sovelluksessa.

ShadowDom

ShadowDom käyttää selaimen natiivia Shadow DOMia komponentin merkinnän ja tyylien todelliseen eristämiseen.

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

Miten ShadowDom eroaa muista

ShadowDom-tilassa komponentti hahmonnetaan todellisen shadow root -juurielementin sisälle. Yleiset tyylit eivät ulotu sen sisälle eivätkä komponentin tyylit vuoda ulos, joten eristys on vahvin mahdollinen.

Tyylien vuotamisen vertailu

Emulated estää tyylien vuotamisen ulospäin, mutta yleiset tyylit voivat edelleen kohdistua elementteihin. None ei eristä lainkaan, kun taas ShadowDom estää molempiin suuntiin tapahtuvan vuotamisen kokonaan.

Tilan valitseminen

Käytä lähes kaikissa tilanteissa Emulated-tilaa. Käytä ShadowDom-tilaa täysin eristettyihin widgetteihin ja None-tilaa vain tarkoituksellisiin yleisiin tyyleihin.

Kapselointi ja yleiset tyylit

Muista, että yleinen styles.css vaikuttaa aina tilasta riippumatta, paitsi ShadowDom-komponentin sisällä, jonne yleiset tyylit eivät ulotu.

Pikatarkistus

Testaa, miten hyvin ymmärrät näkymän kapseloinnin tilat.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Angular tarjoaa kolme kapselointitilaa: Emulated (oletus, jäljitelty rajaus), None (yleiset tyylit) ja ShadowDom (natiivi eristys). Emulated sopii useimpiin tilanteisiin, kun taas ShadowDom tarjoaa vahvimman eristyksen.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Näkymän kapselointitilat” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Näkymän kapselointitilat”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Näkymän kapselointitilat”?

Vertailkaa tiloja Emulated, None ja ShadowDom. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Näkymän kapselointitilat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy