Angular இல் View Encapsulation என்றால் என்ன?

Question

Accepted Answer

**View Encapsulation** ஒரு கூறு பொருளாதாரத்தின் CSS எவ்வாறு வரம்பிடப்பட்டுள்ளது என்பதைக் கட்டுப்படுத்துகிறது — இயல்பாகவே, Angular **ஒவ்வொரு கூறுகளின் பாணிகளையும் தனிமைப்படுத்துகிறது** இதனால் அவை மற்ற கூறுகளுக்கு பிரிந்து செல்லாது அல்லது வெளிப்புற பாணிகளால் பாதிக்கப்படாது. இது CSS இன் உலகளாவிய பரந்த சிக்கலை தீர்க்கிறது. ## இயல்பாக: 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 பெயரிடவற்றை மீண்டும் எழுதுகிறது இவற்றுடன் மட்டுமே — நேடிவ் Shadow DOM தேவை இல்லாமல் வரம்பிடப்பட்ட பாணிகளை தெய்வேக்கவையாக்கி. ## மூன்று பயன்முறைகள் ```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` கூறு சொந்த மூல உறுப்பை பாணிமயமாக்குகிறது; `::ng-deep` ஒரு பாணிக்களை சந்ததிக்கு கட்டாயப்படுத்துகிறது (சக்திவாய்ந்த ஆனால் மறுக்கப்பட்டது — encapsulation ஐ உடைக்கிறது). ## இது ஏன் முக்கியமானது View Encapsulation என்பது Angular கூறுகள் தனிமைமாக பாணிமயமாக்குவதற்கு பாதுகாப்பாக இருக்கும் காரணம் — ஒரு கூறியில் `h2 { color: blue }` என்று எழுதலாம் பயன்பாட்டில் ஒவ்வொரு `

` ஐயும் கெடுத்து விடாமல். இயல்பாக `Emulated` பயன்முறையை புரிந்துகொள்ளுதல் (மற்றும் `None`/`ShadowDom` மாற்றுகள், மற்றும் `:host` மற்றும் `::ng-deep` முன்னுரிமைக்கான விதிவிலக்குகளுக்கு) பெரிய பயன்பாடுகளில் பாணிகளை நிர்வகிப்பதற்கு மற்றும் பாணி கசிவு ஒரு பெரிய சிக்கலாக இருக்கும் கூறு நூலகங்களை உருவாக்குவதற்கு முக్తியம்.