Angular2 - जाओ घटक प्रकाश डोम innerHTML/बच्चे नोड्स

Question

चलो कहते हैं कि मैं एक घटक है दो:

@Component({ 
    selector: 'foo', 
    template: '<div>foo</div>' 
}) 
export class Foo {} 

और मैं इस तरह एक और घटक में उपभोग:

<foo> 
    <h1>some inner HTML</h1> 
</foo> 

मैं कैसे जान सकता यदि Foo प्रकाश डीओएम में कोई बाल तत्व है?

मैं <h1>some inner HTML</h1> के ahold पाने के लिए चाहते हैं।

विकल्प 1 - @ContentChildren(): यह मनमाना तत्व क्वेरी करने के लिए इस्तेमाल नहीं किया जा सकता है; वर्तमान में केवल कोणीय 2 घटक या चर (#foo) इस तरह से पूछे जा सकते हैं। यदि मैं इससे बच सकता हूं तो मैं आंतरिक तत्वों में एक चर को संलग्न नहीं करना चाहता हूं।

विकल्प 2 - elementRef.nativeElement: मैं Foo घटक में ElementRef इंजेक्षन कर सकते हैं, लेकिन समय के घटक instantiated है (निर्माता में) द्वारा, भीतरी तत्वों को पहले ही हटा दिया गया है, और यह खाली हो जाएगा। जीवन चक्र (जैसे ngAfterViewInit()) में बाद में आंतरिक तत्वों सिर्फ छाया डोम (अर्थात <div>foo</div>) हो जाएगा।

किसी भी अन्य तरीके कि मुझे याद आ रही?

प्रकरण उपयोग

के बारे में कारण है कि मैं ऐसा करना चाहते हैं कुछ संदर्भ देने के लिए, मैं जो एक डिफ़ॉल्ट टेम्पलेट है, जो एक कस्टम टेम्पलेट द्वारा बदले जा सकते उपयोगकर्ता निर्णय लेता है तो एक पुस्तकालय घटक बनाने रहा हूँ। तो मेरी डिफ़ॉल्ट टेम्पलेट इस तरह दिखता है:

<div *ngIf="hasTemplate"><ng-content></ng-content></div> 
<div *ngIf="!hasTemplate"><!-- the default template --></div> 

मैं किसी तरह की जरूरत है true को hasTemplate स्थापित करने के लिए अगर वहाँ <foo>..</foo> टैग के अंदर एचटीएमएल है।

Answer 1

• आप encapsulation: ViewEncapsulation.Native स्विच कर सकते हैं तो सामग्री प्रकाश डोम में होगा

• आप <div #wrapper><ng-content><ng-content><div> के चारों ओर एक आवरण तत्व जोड़ सकते हैं तो आप "छाया डोम" से तत्वों प्राप्त कर सकते हैं