View Encapsulation inasimulia jinsi CSS ya sehemu ilivyowekwa — kwa kawaida, Angular huweka kila sehemu ya mitindo yake yenyewe ili isije mtiririko kwa sehemu nyingine au kuathiriwa na mitindo ya nje. Hii hutatua tatizo la kiwango kikubwa cha CSS.
({
: ,
: ,
: [],
})
{}
Kwa modo wa kawaida Emulated, h2 { color: blue } haitaathiri <h2> katika sehemu zingine, na mitindo ya nje haitaingia ndani ya hii.
<!-- 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 kikawaida huongeza sifa za kipekee za _ngcontent/_nghost kwa vipengele vya sehemu na kuandika upya vitenganishi vyake vya CSS ili vinane tu — kuiga mitindo yenye kiwango bila haja ya Shadow DOM ya asili.
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 inasimulia kipengele kizazi cha sehemu yenyewe; ::ng-deep huweka mitindo kwa wanarutuba (yenye nguvu lakini haipendekezi — inaharibu encapsulation).
View Encapsulation ndiyo sababu ya kuwa sehemu za Angular salama ya kufanya mitindo kwa kujipinga — unaweza kuandika h2 { color: blue } katika sehemu moja bila kuwa na wasiwasi kuhusu kuathiri kila <h2> katika programu.
Kuelewa modo wa kawaida Emulated (na mbadala za None/ShadowDom, pamoja na :host na ::ng-deep kwa mizani ya kusudi) ni muhimu kwa kukamatia mitindo katika programu kubwa na kwa kujenga maktaba ya sehemu ambapo kutoroka kwa mitindo kungekuwa tatizo kubwa.