Angular Academy · पाठ

व्यू इनकैप्सुलेशन मोड

Emulated, None और ShadowDom की तुलना करें।

पाठ 2, कुल 4 में से13 चरण

व्यू इनकैप्सुलेशन मोड, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

View Encapsulation क्या है

व्यू एनकैप्सुलेशन यह नियंत्रित करता है कि किसी घटक की शैलियाँ पृष्ठ के बाकी हिस्से से कैसे अलग रहें। Angular, encapsulation प्रॉपर्टी के माध्यम से तीन मोड प्रदान करता है।

मोड सेट करना

@Component डेकोरेटर में ViewEncapsulation एनम का उपयोग करके मोड सेट कीजिए।

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-card",
  encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}

Emulated (डिफ़ॉल्ट)

Emulated डिफ़ॉल्ट मोड है। Angular, नेटिव Shadow DOM का उपयोग किए बिना, तत्वों और चयनकर्ताओं में विशिष्ट एट्रिब्यूट जोड़कर सीमित शैलियों का अनुकरण करता है।

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Emulated कैसे काम करता है

Emulated मोड, बनाए गए एट्रिब्यूट के साथ चयनकर्ताओं को फिर से लिखता है। इससे Shadow DOM समर्थन की आवश्यकताओं के बिना सभी ब्राउज़र में सीमांकन काम करता है।

/* you write */
.title { color: blue; }

/* angular emits */
.title[_ngcontent-xyz] { color: blue; }

None

None एनकैप्सुलेशन को पूरी तरह निष्क्रिय करता है। घटक की शैलियाँ वैश्विक बन जाती हैं और पृष्ठ के किसी भी तत्व को प्रभावित कर सकती हैं।

@Component({
  encapsulation: ViewEncapsulation.None,
  styles: [".title { color: red; }"]
})
// .title now applies app-wide

None का उपयोग कब करें

None का उपयोग कम ही कीजिए, जैसे किसी एक घटक से साझा थीम नियम परिभाषित करने के लिए। सावधान रहिए, क्योंकि शैलियाँ वैश्विक स्तर पर टकरा सकती हैं।

ShadowDom

ShadowDom घटक के मार्कअप और शैलियों को वास्तव में अलग रखने के लिए ब्राउज़र के नेटिव Shadow DOM का उपयोग करता है।

@Component({
  selector: "app-widget",
  encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}

ShadowDom कैसे अलग है

ShadowDom के साथ घटक एक वास्तविक शैडो रूट के भीतर रेंडर होता है। वैश्विक शैलियाँ अंदर प्रवेश नहीं कर पातीं और घटक की शैलियाँ बाहर नहीं फैलतीं, जिससे सबसे मजबूत अलगाव मिलता है।

शैली के रिसाव की तुलना

Emulated शैलियों को बाहर रिसने से रोकता है, लेकिन वैश्विक शैलियाँ अब भी तत्वों को लक्षित कर सकती हैं; None में कोई अलगाव नहीं होता; ShadowDom दोनों दिशाओं में रिसाव को पूरी तरह रोकता है।

मोड चुनना

लगभग हर स्थिति में Emulated का उपयोग कीजिए। पूरी तरह अलग रखे गए विजेट के लिए ShadowDom और केवल जानबूझकर बनाई गई वैश्विक शैलियों के लिए None का उपयोग कीजिए।

एनकैप्सुलेशन और वैश्विक शैलियाँ

याद रखिए कि वैश्विक styles.css मोड की परवाह किए बिना हमेशा लागू होती है, सिवाय ShadowDom घटक के अंदर, जहाँ वैश्विक शैलियाँ नहीं पहुँचतीं।

त्वरित जाँच

व्यू एनकैप्सुलेशन मोड की अपनी समझ जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

Angular तीन एनकैप्सुलेशन मोड प्रदान करता है: Emulated (डिफ़ॉल्ट, अनुकरण किया गया सीमांकन), None (वैश्विक शैलियाँ) और ShadowDom (नेटिव अलगाव)। Emulated अधिकांश स्थितियों के लिए उपयुक्त है; ShadowDom सबसे मजबूत अलगाव देता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “व्यू इनकैप्सुलेशन मोड” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “व्यू इनकैप्सुलेशन मोड” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“व्यू इनकैप्सुलेशन मोड” में मैं क्या सीखूँगा?

Emulated, None और ShadowDom की तुलना करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“व्यू इनकैप्सुलेशन मोड” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ