क्या कोणीय 2+

Question

में सशर्त सामग्री प्रक्षेपण (ट्रांसक्यूलेशन) करना संभव है, मैं डिफ़ॉल्ट सामग्री प्रदान करना चाहता हूं जो केवल तब दिखाई देगी जब सामग्री को स्थानांतरित नहीं किया जाता है।

<article> 
    <header> 
     <ng-content select="[header]"></ng-content> 
    </header> 
    <section> 
     <ng-content></ng-content> 
    </section> 
</article> 

मैं इसे इस तरह उपयोग कर सकते हैं:

उदाहरण के लिए यहाँ मेरी घटक टेम्पलेट है

<my-component> 
    <h1 header>This is my header</h1> 
    <p>This is my content</p> 
</my-component> 

अब क्या होगा यदि मैं एक डिफ़ॉल्ट शीर्षक देना चाहता था। क्या यह संभव है; ngAfterContentInit में सामग्री की जांच जैसे एक्रोबेटिक्स के बिना?

Answer 1

आप इसे शुद्ध सीएसएस के साथ कर सकते हैं! कल्पना कीजिए कि आप निम्नलिखित

<ng-content select=".header"></ng-content> 
<h1 class="default-header"> 
    This is my default header 
</h1> 

उसके बाद निम्न सीएसएस हैडर छिपाने होगा अगर सामग्री आपूर्ति की है:

.header + .default-header { 
    display: none; 
} 

कोई शीर्ष लेख की आपूर्ति की जाती है, तो प्रदर्शन: कोई नहीं नियम का मिलान नहीं किया गया है ।

ध्यान दें, तो आप इस का उपयोग करने के लिए सामग्री कैप्सूलीकरण बंद करने के लिए होगा: encapsulation: ViewEncapsulation.None