Angular ਵਿੱਚ View Encapsulation ਕੀ ਹੈ?

Question

Accepted Answer

**View Encapsulation** ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਕੰਪੋਨੈਂਟ ਦਾ CSS scoped ਹੈ — ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ, Angular **ਹਰੇਕ ਕੰਪੋਨੈਂਟ ਦੇ ਸਟਾਈਲਾਂ ਨੂੰ ਵੱਖ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਉਹ ਦੂਸਰੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਲੀਕ ਨਾ ਹੋਣ ਜਾਂ ਪ੍ਰਭਾਵਿਤ ਨਾ ਹੋਣ। ਇਹ 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 }` ਦੂਸਰੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ `

` ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰੇਗਾ, ਅਤੇ ਬਾਹਰੀ ਸਟਾਈਲਾਂ ਇਸ ਵਿੱਚ ਲੀਕ ਨਹੀਂ ਹੋਣਗੀਆਂ। ## Emulated ਹੁੱਡ ਦੇ ਅਂਤਰਗਤ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ```html
Title
``` Angular ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਕੰਪੋਨੈਂਟ ਦੇ ਐਲੀਮੈਂਟਸ ਵਿੱਚ ਵਿਲੱਖਣ `_ngcontent`/`_nghost` ਐਟਰੀਬਿਊਟਸ ਜੋੜਦਾ ਹੈ ਅਤੇ ਇਸਦੇ CSS ਸਿਲੈਕਟਰਜ਼ ਨੂੰ ਮੁੜ ਲਿਖਦਾ ਹੈ — native Shadow DOM ਦੀ ਲੋੜ ਦੇ ਬਿਨਾਂ scoped ਸਟਾਈਲਾਂ ਦੀ ਨਕਲ ਕਰਦਾ ਹੈ। ## ਤਿੰਨ ਮੋਡ ```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 ਨੂੰ ਭੇਦਨਾ ```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` ਕੰਪੋਨੈਂਟ ਦੇ ਆਪਣੇ root ਐਲੀਮੈਂਟ ਨੂੰ ਸਟਾਈਲ ਕਰਦਾ ਹੈ; `::ng-deep` ਇੱਕ ਸਟਾਈਲ ਨੂੰ ਡਿਸੈਨਡੈਂਟਸ ਵਿੱਚ ਲਾਗੂ ਕਰਦਾ ਹੈ (ਸ਼ਕਤੀਸ਼ਾਲੀ ਪਰ ਨਿਰਾਸ਼ — ਇਹ encapsulation ਨੂੰ ਤੋੜਦਾ ਹੈ)। ## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ View Encapsulation ਇਸ ਲਈ ਹੈ ਕਿ Angular ਕੰਪੋਨੈਂਟਸ ਅਲਗ ਸਟਾਈਲ ਕਰਨ ਲਈ ਸੁਰੱਖਿਆ ਵਾਲੇ ਹਨ — ਤੁਸੀਂ ਇੱਕ ਕੰਪੋਨੈਂਟ ਵਿੱਚ `h2 { color: blue }` ਲਿਖ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਐਪ ਵਿੱਚ ਹਰੇਕ `

` ਨੂੰ ਖ਼ਰਾਬ ਕਰਨ ਦੀ ਚਿੰਤਾ ਕੀਤੇ। ਡਿਫੌਲਟ `Emulated` ਮੋਡ ਨੂੰ ਸਮਝਣਾ (ਅਤੇ `None`/`ShadowDom` ਵਿਕਲਪ, ਪਲੱਸ `:host` ਅਤੇ `::ng-deep` ਜਾਣਬੁੱਝ ਕੇ ਅਪਵਾਦਾਂ ਲਈ) ਵੱਡੀਆਂ ਐਪਸ ਵਿੱਚ ਸਟਾਈਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਜ਼ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਜਿੱਥੇ ਸਟਾਈਲ ਲੀਕੇਜ ਇੱਕ ਗੰਭੀਰ ਸਮੱਸਿਆ ਹੋਵੇ।