हमारी बहुत सी साइट इस प्रकार संरचित है:

  • अवयव
    • घटक सीएसएस
    • घटक टेम्पलेट <उल>
    • बाल घटक

हमें अक्सर चाइल्ड कंपोनेंट को अलग-अलग स्टाइल करने की आवश्यकता होती है, जिसके आधार पर यह पेरेंट कंपोनेंट में था। यह निश्चित रूप से कष्टप्रद है, लेकिन जब हम ग्लोबल सीएसएस का उपयोग कर रहे थे, तो इसे मैनेज किया जा सकता था क्योंकि हम यूनिक आईडी और क्लास सीएसएस चयनकर्ताओं के साथ विशिष्ट इंस्टेंस को लक्षित कर सकते थे।

हम अब वैश्विक शैलियों का उपयोग बंद करने और प्रत्येक घटक के भीतर अपने सीएसएस को समाहित करने का प्रयास कर रहे हैं। इसके साथ समस्या यह है कि, जो मैं देखता हूं, कोणीय सीएसएस को समाहित करने से आपके सीएसएस का दायरा बढ़ जाएगा ताकि यह केवल उस घटक पर लागू हो ... जिसका अर्थ है कि यह किसी भी बच्चे के घटकों पर भी लागू नहीं होगा।

एक समाधान बच्चे को लक्षित करने के लिए हमारे घटक सीएसएस में ::ng-deep चयनकर्ताओं का उपयोग करना प्रतीत होता है। यह कुछ प्रतिरोध को पूरा कर रहा है, हालांकि, जैसा कि मुझे बताया जा रहा है कि यह सामान्य रूप से इनकैप्सुलेशन को भी तोड़ता है और साइट के अन्य हिस्सों को विभिन्न घटकों में प्रभावित कर सकता है।

यहीं मैं भ्रमित हूं। कुछ सवाल:

क्या ::ng-deep के साथ लक्षित किसी भी शैली को इस तरह से हटा दिया जाता है कि वह पूरी दुनिया में लागू हो जाए? या यह केवल एक मूल घटक के भीतर 'वैश्विक' है?

यदि यह पूर्व है, तो क्या यह अभी भी :: एनजी-डीप का उपयोग करने के लिए एक ठीक अभ्यास होगा, लेकिन यह भी सुनिश्चित करें कि आप अतिरिक्त अद्वितीय सीएसएस चयनकर्ताओं का उपयोग कर रहे हैं, इसलिए यह केवल उस बच्चे के घटक पर लागू होता है जिसे आप लक्षित कर रहे हैं?

या क्या किसी विशेष बाल घटक उदाहरण में शैलियों को जोड़ने का एक और उचित तरीका है?

-1
DA. 8 जिंदा 2021, 22:55

2 जवाब

सबसे बढ़िया उत्तर

:ng-deep वैश्विक है। कोई फर्क नहीं पड़ता कि आप इसे कहाँ रखते हैं, यह सभी घटकों पर लागू होता है। सिर्फ बच्चे नहीं।

यदि आप :host :ng-deep का उपयोग करते हैं, तो यह उस घटक से नीचे काम करेगा (बच्चों, पोते आदि में)।

एनजी-डीप के साथ काम करने वाला मुख्य मुद्दा यह है कि एंगुलर में स्टाइल आलसी लोडेड हैं। तो कुछ मामलों में, आप साइट को पूरी तरह से ठीक से देख सकते हैं, फिर आप एक विशेष पृष्ठ देखते हैं जो एनजी-डीप का उपयोग करता है, फिर आप पिछले पृष्ठों पर वापस जा सकते हैं जो ठीक थे जो अब टूट गए हैं क्योंकि एनजी-डीप शैली लागू साइट है चौड़ा। भूतपूर्व। https://tutorialsforangular.com/2020/04 /13/द-डेंजर्स-ऑफ-एनजी-डीप-ब्लीडिंग/

आम तौर पर बोलते हुए, अगर मुझे बच्चे के घटक को थोड़ा अलग तरीके से स्टाइल करने की ज़रूरत है, तो मैं बच्चे के लिए एक इनपुट वैरिएबल बनाता हूं, माता-पिता को इसे सेट करता हूं, फिर इसे चाइल्ड कंपोनेंट HTML में कहीं एक क्लास बना देता हूं। चाइल्ड कंपोनेंट तब उस क्लास को स्टाइल कर सकता है कि वह कैसा दिखता है और आपको एनकैप्सुलेशन को तोड़ना नहीं है।

1
MindingData 14 जिंदा 2021, 21:37

::ng-deep अपने आप में शैली को वैश्विक बना देता है, लेकिन जब :host के साथ संयुक्त हो तो वह वह कर सकता है जो आपको चाहिए, लेकिन जैसा कि @eldar ने यह लिंक, ::ng-deep पदावनत है (और कुछ समय से है)।

1
BlackICE 8 जिंदा 2021, 23:52