आंतरिक HTML

Question

में घटक को बांधने के लिए कोणीय 2 को कैसे प्राप्त करें मैं एक घटक myApp बनाना चाहता हूं जो अपने टेम्पलेट में नियंत्रक पर किसी संपत्ति से HTML एम्बेड करेगा। हालांकि, उस HTML में से कुछ में अन्य घटक चयनकर्ता शामिल हो सकते हैं।

import {InfoComponent} from ... 
@Component({ 
    selector: 'myApp', 
    template: `<div [innerHTML]='hData'></div> 
       <myInfo></myInfo>`, 
    directives: [InfoComponent] 
}) 
export class AppComponent { 
    hData = "<myInfo></myInfo>"; 
} 

@Component({ 
    selector: 'myInfo', 
    template: "<b>This is a test</b>" 
}) 
export class InfoComponent { 
} 

इस उदाहरण में, मैं This is a test दो बार दिखाया गया है देखने की अपेक्षा करेंगे। हालांकि, ऐसा नहीं लगता है कि Angular2 इंजन इस तथ्य पर उठाता है कि घटक के चयनकर्ता को इंजेक्शन दिया गया है ताकि टेम्पलेट को <myInfo></myInfo> चयनकर्ता के लिए जेनरेट नहीं किया जा सके जो बाध्यकारी के माध्यम से जोड़ता है।

आप demo here देख सकते हैं।

क्या चयनकर्ता के साथ ऐसा करने के लिए कोणीय 2 को एंगुलर 2 प्राप्त करने का कोई तरीका है जो स्पष्ट रूप से टेम्पलेट में जोड़ा गया है?

Answer 1

[innerHtml]="..." को कोणीय घटकों या निर्देशों को तत्काल बनाने या किसी भी बाइंडिंग को स्थापित करने का कोई तरीका नहीं है।

इस आवश्यकता के लिए निकटतम DynamicComponentLoader है। (DynamicComponentLoader थोड़ी देर पहले हटा दिया गया था) ViewContainerRef.createComponent()

एक उदाहरण

के लिए Angular 2 dynamic tabs with user-click chosen components देखें चूंकि RC.5 Angular2 शैलियों sanitizes और एचटीएमएल बंधन के माध्यम से जोड़ा। अधिक जानकारी के लिए In RC.1 some styles can't be added using binding syntax देखें।