Angular Academy · Lekcja

Tryby enkapsulacji widoku

Porównuj Emulated, None i ShadowDom.

Tryby enkapsulacji widoku to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Czym jest enkapsulacja widoku

Enkapsulacja widoku określa, jak style komponentu są izolowane od reszty strony. Angular udostępnia trzy tryby za pomocą właściwości encapsulation.

Ustawianie trybu

Ustaw tryb za pomocą enuma ViewEncapsulation w dekoratorze @Component.

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

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

Emulated (domyślny)

Emulated jest trybem domyślnym. Angular symuluje style ograniczone do komponentu, dodając unikatowe atrybuty do elementów i selektorów, bez używania natywnego Shadow DOM.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Jak działa Emulated

Tryb Emulated przepisuje selektory za pomocą wygenerowanych atrybutów, zapewniając ograniczenie stylów, które działa we wszystkich przeglądarkach bez wymogu obsługi Shadow DOM.

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

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

None

None całkowicie wyłącza enkapsulację. Style komponentu stają się globalne i mogą wpływać na dowolny element na stronie.

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

Kiedy używać None

Używaj None oszczędnie, na przykład do definiowania współdzielonych reguł motywu w jednym komponencie. Pamiętaj, że style mogą powodować globalne konflikty.

ShadowDom

ShadowDom używa natywnego Shadow DOM przeglądarki, aby rzeczywiście izolować znaczniki i style komponentu.

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

Czym różni się ShadowDom

W trybie ShadowDom komponent jest renderowany wewnątrz rzeczywistego katalogu cieni. Style globalne nie przenikają do jego wnętrza, a style komponentu nie wydostają się na zewnątrz, co zapewnia najsilniejszą izolację.

Porównanie przenikania stylów

Emulated zapobiega wydostawaniu się stylów, ale style globalne nadal mogą obejmować elementy; None nie zapewnia izolacji; ShadowDom całkowicie blokuje przenikanie w obu kierunkach.

Wybór trybu

W niemal każdym przypadku pozostań przy Emulated. Używaj ShadowDom dla całkowicie izolowanych widżetów, a None tylko w przypadku celowo globalnych stylów.

Enkapsulacja a style globalne

Pamiętaj, że globalny plik styles.css zawsze ma zastosowanie, niezależnie od trybu, z wyjątkiem wnętrza komponentu ShadowDom, do którego style globalne nie docierają.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat trybów enkapsulacji widoku.

Podsumowanie

Angular udostępnia trzy tryby enkapsulacji: Emulated (domyślny, symulowane ograniczenie stylów), None (style globalne) i ShadowDom (natywna izolacja). Emulated sprawdza się w większości przypadków, a ShadowDom zapewnia najsilniejszą izolację.

Często zadawane pytania

Czy lekcja „Tryby enkapsulacji widoku” jest bezpłatna?

Tak — pełny tekst „Tryby enkapsulacji widoku” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tryby enkapsulacji widoku”?

Porównuj Emulated, None i ShadowDom. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Tryby enkapsulacji widoku”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy