View Encapsulation კონტროლირებს, თუ როგორ მოხდება კომპონენტის CSS დამყარება — ნაგულიშვილი, Angular თითოეული კომპონენტის სტილებს იზოლირებს ისე, რომ ისინი არ გაჟონიან სხვა კომპონენტებში და არ დაზიანდებიან მათ მიერ. ეს აგვარებს CSS-ის გლობალური ფარგლების პრობლემას.
({
: ,
: ,
: [],
})
{}
ნაგულიშვილი Emulated რეჟიმით, ეს h2 { color: blue } არ იმოქმედებს <h2>-ებზე სხვა კომპონენტებში, და გარე სტილები არ გაჟონიან ამ კომპონენტში.
<!-- Angular adds unique attributes to scope the styles -->
<app-card _nghost-abc>
<h2 _ngcontent-abc>Title</h2>
</app-card>
<style>h2[_ngcontent-abc] { color: blue; }</style> <!-- scoped by attribute -->
Angular ავტომატურად დამატებული უნიკალური _ngcontent/_nghost ატრიბუტებს კომპონენტის ელემენტებს და ხელახლა წერს CSS selector-ებს, რათა ისინი მხოლოდ ამათ შეესაბამებოდეს — ემულირებს დაცული სტილებს ისე, რომ არ დაჭირდეს ნატიური Shadow DOM.
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)
/* 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 სტილიზერ კომპონენტის საკუთარი root ელემენტს; ::ng-deep აძალებს სტილს ჩამოსული ელემენტებისკენ (მძლავრი, მაგრამ რეკომენდირებული არ არის — ამცირებს encapsulation-ს).
View Encapsulation ის მიზეზი, რომ Angular კომპონენტები უსაფრთხოა გამოყენებული იზოლაციაში — შეგიძლია დაწერო h2 { color: blue } ერთ კომპონენტში, კვლავ არ ღელავ ის, რომ დაზიანდება ყველა <h2> აპლიკაციაში.
ნაგულიშვილი Emulated რეჟიმის ესმის მიღება (და None/ShadowDom ალტერნატივები, დამატებით :host და ::ng-deep განზრახ გამონაკლისებისთვის) მნიშვნელოვანია სტილების დამმართველობისთვის დიდი აპლიკაციებში და კომპონენტის ბიბლიოთეკების აშენებისთვის, სადაც სტილის გაჟონვა სერიოზული პრობლემა იქნებოდა.