Angular मा View Encapsulation के हो?

Question

Accepted Answer

**View Encapsulation** ले component को CSS कसरी scope गरिन्छ भनी नियन्त्रण गर्छ — पूर्वनिर्धारितरूपमा, Angular **प्रत्येक component को styles लाई अलग गर्छ** ताकि तिनीहरू अन्य components मा leak नहुन् वा प्रभावित नहुन्। यो CSS को global-scope समस्या समाधान गर्छ। ## पूर्वनिर्धारित: 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 {} ``` पूर्वनिर्धारित `Emulated` मोडमा, त्यो `h2 { color: blue }` अन्य components मा `

` लाई प्रभावित गर्दैन, र बाहिरी styles यसमा leak हुँदैनन्। ## Emulated कसरी काम गर्छ ```html
Title
``` Angular स्वचालित रूपमा component को elements मा अनौठो `_ngcontent`/`_nghost` attributes थप्छ र यसको CSS selectors लाई पुनः लेख्छ — native Shadow DOM आवश्यक नगरीकन scoped styles लाई नकल गर्दै। ## तीनवटा मोडहरू ```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) ``` ## आवश्यक हुँदा encapsulation लाई pierce गर्नुहोस् ```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` component को आफ्नो root element लाई स्टाइल गर्छ; `::ng-deep` ले style लाई descendants मा जबरदस्ती गर्छ (शक्तिशाली तर असल्लाहद — यो encapsulation लाई तोड्छ)। ## यो महत्त्वपूर्ण किन छ View Encapsulation यो कारणले Angular components अलग गरीएको स्टाइलमा सुरक्षित छन् — तपाई एक component मा `h2 { color: blue }` लेख्न सक्नुहुन्छ बिना app मा प्रत्येक `

` लाई clobber गरिरहेको चिन्ता गरेर। pूर्वनिर्धारित `Emulated` मोड (र `None`/`ShadowDom` विकल्पहरू, साथै `:host` र `::ng-deep` इरादाजनक अपवादहरूको लागि) को बुझ्न बडा apps मा styles प्रबन्ध गर्न र component libraries निर्माण गर्न महत्त्वपूर्ण छ जहाँ style leakage एक गम्भीर समस्या हुनेछ।