Çfarë është View Encapsulation në Angular?

Question

Accepted Answer

**View Encapsulation** kontrollon se si është i ndarë CSS i komponentës — si parazgjedhje, Angular **izolon stilet e secilës komponente** në mënyrë që ato të mos rrjetin në komponente të tjera dhe të mos preken nga stilet e jashtme. Kjo zgjidh problemin e fushës globale të CSS. ## Opsioni i parazgjedhur: Emulated encapsulation ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // ONLY affects this component's

// encapsulation: ViewEncapsulation.Emulated (the default — no need to specify) }) export class CardComponent {} ``` Me modalitetin `Emulated` të parazgjedhur, `h2 { color: blue }` nuk do të ndikojë në `

` në komponente të tjera, dhe stilet e jashtme nuk do të depërtojnë në këtë. ## Si funksionon Emulated prapa skenës ```html
Title
``` Angular automatikisht shton atribute unike `_ngcontent`/`_nghost` në elementet e komponentës dhe rishkruan selektorët e saj CSS për t'u përputhur vetëm me ta — duke emuluar stilet e ndarë pa nevojën për Shadow DOM nativo. ## Tre mënyrat ```text ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere) ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation) ViewEncapsulation.None → NO scoping — styles are global (leak everywhere) ``` ## Depërtimi i encapsulation kur është i nevojshëm ```css /* style a child component's internals from the parent / :host { display: block; } / the component's own host element / :host(.active) { ... } / host with a class / ::ng-deep .child-class { color: red; } / pierce into children (use sparingly — deprecated-ish) */ ``` `:host` shtyl elementin rrënjë të komponentës; `::ng-deep` detyron një stil përmes tek përftueset (i fuqishëm por i dekurazhuar — e thyen encapsulation). ## Pse ka rëndësi View Encapsulation është arsyeja pse komponentët Angular janë të sigurta për t'u stilizuar në izolim — mund të shkruani `h2 { color: blue }` në një komponent pa u shqetësuar se po shkaktoni dëm në çdo `

` në aplikacion. Kuptimi i modalitetit `Emulated` të parazgjedhur (dhe alternativet `None`/`ShadowDom`, përveç `:host` dhe `::ng-deep` për përjashtime të qëllimshme) është i rëndësishëm për menaxhimin e stileve në aplikacione të mëdha dhe për ndërtimin e bibliotekave komponentesh ku depërtimi i stileve do të ishte një problem serioz.