मैं एक ReactJS और JSVanilla पृष्ठभूमि से कोणीय सीख रहा हूँ। मैं यह समझने की कोशिश कर रहा हूं कि कोणीय अपने विचारों का निर्माण कैसे करता है और हम उनके साथ कैसे काम कर सकते हैं।

मेरा प्रश्न है: पैरेंट सीएसएस को एंगुलर पर बच्चे के सीएसएस को प्रतिबिंबित/बाधित करने का सबसे अच्छा तरीका (या उपलब्ध विकल्प) क्या है?

उदाहरण, JSVanilla का उपयोग करना:

<section class="parent">
    <section class="child">
         <section class="grandchild">
         </section>
    </section>
</section>
.parent{
    height: 1000px;
    width: 800px;
}

.child{
    height: 80%;
    width: 90%;
}

.grandchild{
    height: 30%;
    width: 20%;
}

इस मामले में, प्रत्येक अनुभाग अपने आप में एक घटक होगा।

0
Marco Antonio 20 अगस्त 2021, 00:21

2 जवाब

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

खैर, कुछ के लिए अध्ययन करते हुए, मैं एक अच्छा समाधान लेकर आया हूं जिसमें :host चयनकर्ता शामिल है।

कोणीय में, एक मॉड्यूल में सभी घटकों को प्रस्तुत किए जाने के बाद, हमें निम्नलिखित छद्म-पेड़ मिलते हैं:

<app-parent>
    <section class="parent">

        <app-child>
             <section class="child">

                 <app-grandchild>
                     <section class="grandchild">
                     </section>
                 </app-grandchild>

             </section>
        </app-child>

    </section>
</app-parent>

जैसा कि हम देख सकते हैं, बच्चे की बाधाओं को <app-tag/> द्वारा चिह्नित किया जा रहा है, जो यह निर्धारित करता है कि बच्चों को कैसे प्रस्तुत किया जाएगा।

आकार के संदर्भ में, लेकिन सभी विशेषताओं के मामले में, मेरे लिए सबसे अच्छा विकल्प :host selector का उपयोग करना था, जो <app-tag/> का चयन करता है। सीएसएस में, इस तरह दिखेगा:

:host{
    height:80%;
    width: 90%;
}

.child{
     /* child styles here */ 
}

और इसने मेरी समस्याओं का समाधान किया।

1
Marco Antonio 19 अगस्त 2021, 22:43

आप एंगुलर में व्यू एनकैप्सुलेशन कॉन्सेप्ट के बारे में पढ़ सकते हैं। 3 प्रकार के व्यू एनकैप्सुलेशन हैं।

  1. देखेंएनकैप्सुलेशन।कोई नहीं
  2. देखेंएनकैप्सुलेशन.एमुलेटेड
  3. देखेंएनकैप्सुलेशन।छायाडोम

आप इनकैप्सुलेशन को @Component डेकोरेटर में रख सकते हैं जैसा कि नीचे दिए गए कोड स्निपेट में दिखाया गया है

@Component({
  selector: 'app-shadow-dom-encapsulation',
  template: `
    <h2>ShadowDom</h2>
    <div class="shadow-message">Shadow DOM encapsulation</div>
    <app-emulated-encapsulation></app-emulated-encapsulation>
    <app-no-encapsulation></app-no-encapsulation>
  `,
  styles: ['h2, .shadow-message { color: blue; }'],
  encapsulation: ViewEncapsulation.ShadowDom,
})

कृपया नीचे दिए गए लेख को पढ़ें, आशा है कि यह मदद करता है !! https://codecraft.tv/courses/angular/components/templates -स्टाइल-व्यू-एनकैप्सुलेशन/

0
Apoorva T 19 अगस्त 2021, 23:06