कैसे और कहाँ उपयोग करें :: एनजी-डीप?

Question 1

मैं एंगुलर 4 के लिए नया हूं, तो क्या कोई भी यह बता सकता है कि ::ng-deepएंगुलर 4 में कैसे और कहां उपयोग करना है?

वास्तव में मैं मूल घटक से बच्चे के घटकों के कुछ सीएसएस गुणों को अधिलेखित करना चाहता हूं। इसके अलावा यह IE11 पर समर्थित है?

Question 2

आमतौर पर /deep/ “shadow-piercing”कॉम्बीनेटर का इस्तेमाल किसी स्टाइल को कम करने के लिए किया जा सकता है child components। इस चयनकर्ता का एक उपनाम था >>> और अब इसका एक और नाम है :: एनजी-डीप।

जब /deep/ combinatorसे पदावनत किया गया है, इसका उपयोग करने की सिफारिश की गई है::ng-deep

उदाहरण के लिए:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

तथा css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

इसे बाल घटकों पर लागू किया जाएगा

Question 3

प्रयोग

::ng-deep, >>>और /deep/विशिष्ट CSS नियमों के लिए दृश्य एन्कैप्सुलेशन को अक्षम करें, दूसरे शब्दों में, यह आपको DOM तत्वों तक पहुंच प्रदान करता है, जो आपके घटक के HTML में नहीं हैं। उदाहरण के लिए, यदि आप कोणीय सामग्री (या किसी अन्य तृतीय-पक्ष पुस्तकालय) का उपयोग कर रहे हैं, तो कुछ उत्पन्न तत्व आपके घटक के क्षेत्र (जैसे संवाद ) से बाहर हैं और आप उन तत्वों तक सीधे या नियमित सीएसएस का उपयोग नहीं कर सकते हैं मार्ग। यदि आप उन तत्वों की शैलियों को बदलना चाहते हैं, तो आप उन तीन चीजों में से एक का उपयोग कर सकते हैं, उदाहरण के लिए:

::ng-deep .mat-dialog {
  /* styles here */
}

अब के लिए कोणीय टीम केवल ईमूलेटेड व्यू एनकैप्सुलेशन के साथ "डीप" जोड़तोड़ करने की सिफारिश करती है ।

प्रतिवाद

"गहरी" जोड़तोड़ वास्तव में भी पदावनत हैं, लेकिन क्या यह अभी के लिए काम कर रहा है, क्योंकि कोणीय पूर्व-प्रसंस्करण समर्थन करता है ( ::ng-deepआज मना करने के लिए जल्दी मत करो , पहले पदावनति प्रथाओं पर एक नज़र डालें )।

वैसे भी, इस तरह से अनुसरण करने से पहले, मैं आपको दृश्य इनकैप्सुलेशन दृष्टिकोण को अक्षम करने पर एक नज़र डालने की सलाह देता हूं (जो कि आदर्श भी नहीं है, यह आपकी शैलियों को अन्य घटकों में लीक करने की अनुमति देता है), लेकिन कुछ मामलों में, यह एक बेहतर तरीका है। यदि आपने दृश्य एन्कैप्सुलेशन को अक्षम करने का निर्णय लिया है, तो सीएसएस नियमों के प्रतिच्छेदन से बचने के लिए विशिष्ट कक्षाओं का उपयोग करने की दृढ़ता से अनुशंसा की जाती है, और अंत में, अपनी स्टाइलशीट में गड़बड़ी से बचें। घटक की .tsफ़ाइल में दाईं ओर अक्षम करना वास्तव में आसान है :

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

आप इस लेख में दृश्य इनकैप्सुलेशन के बारे में अधिक जानकारी पा सकते हैं ।

Question 4

मैं ::ng-deepएक घटक के केवल बच्चों को सीमित करने के महत्व पर जोर दूंगा कि माता-पिता को एक एन्कैप्सुलेटेड सीएसएस क्लास की आवश्यकता हो।

यह काम करने के ::ng-deepलिए माता-पिता के बाद का उपयोग करना महत्वपूर्ण है , इससे पहले नहीं तो यह सभी वर्गों के लिए एक ही नाम के साथ लागू होता है जिस क्षण घटक को लोड किया जाता है।

घटक सीएसएस:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

घटक टेम्पलेट:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

परिणामी (कोणीय उत्पन्न) सीएसएस:

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

संपादित करें:

आप :hostएक नया सीएसएस क्लास बनाने के बजाय कीवर्ड का उपयोग करके उसी व्यवहार को प्राप्त कर सकते हैं ।

:host ::ng-deep .mat-checkbox-layout

Question 5

सुनिश्चित करें कि व्याख्या को याद नहीं करना है :host-contextजो सीधे ::ng-deepकोणीय मार्गदर्शिका में ऊपर है: https://angular.io/guide/component-nyles । मैं इसे अब तक याद किया और चाहते हैं कि मैं इसे जल्द ही देखूं।

::ng-deepअक्सर आवश्यक होता है जब आप घटक नहीं लिखते हैं और इसके स्रोत तक पहुंच नहीं होती है, लेकिन :host-contextजब आप करते हैं तो यह बहुत उपयोगी विकल्प हो सकता है।

उदाहरण के लिए मेरे पास <h1>मेरे द्वारा डिज़ाइन किए गए एक घटक के अंदर एक काला हैडर है, और मैं चाहता हूं कि जब यह एक अंधेरी थीम्ड पृष्ठभूमि पर प्रदर्शित हो, तो इसे सफेद में बदलने की क्षमता हो।

यदि मेरे पास उस स्रोत तक पहुंच नहीं है जो मुझे माता-पिता के लिए सीएसएस में करना पड़ सकता है:

.theme-dark widget-box ::ng-deep h1 { color: white; }

लेकिन इसके बजाय :host-contextआप घटक के अंदर ऐसा कर सकते हैं ।

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

यह घटक श्रृंखला के लिए कहीं भी दिखेगा .theme-darkऔर अगर पाया गया तो h1 के लिए सीएसएस लागू करेगा। यह बहुत अधिक भरोसा करने का एक अच्छा विकल्प है, ::ng-deepजिस पर अक्सर आवश्यक है, कुछ हद तक एक विरोधी पैटर्न है।

इस मामले में &इसकी जगह ले ली जाती है h1(कि कैसे sass / scss काम करता है) ताकि आप अपने 'सामान्य' और थीम्ड / वैकल्पिक css को एक दूसरे के ठीक बगल में परिभाषित कर सकें जो बहुत काम का है।

सही संख्या पाने के लिए सावधान रहें :। क्योंकि ::ng-deepदो हैं और :host-contextकेवल एक के लिए है।

Question 6

बस एक अद्यतन:

आपको ::ng-deepइसके बजाय उपयोग करना चाहिए /deep/जो कि पदावनत लगता है।

प्रति प्रलेखन:

छाया-भेदी वंशज कॉम्बिनेटर को पदावनत किया जाता है और प्रमुख ब्राउज़रों और उपकरणों से समर्थन हटाया जा रहा है। जैसे कि हम कोणीय (सभी 3 / गहरी /, >>> और :: एनजी-डीप के लिए) में समर्थन छोड़ने की योजना बना रहे हैं। तब तक :: उपकरण के साथ व्यापक संगतता के लिए एनजी-डीप को प्राथमिकता दी जानी चाहिए।

आप इसे यहाँ पा सकते हैं

Question 7

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

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}