कोणीय 2 में एचटीएमएल टेम्पलेट्स

Question

कोणीय 2 में मुझे अनावश्यक भागों के साथ एक बड़ा HTML-टेम्पलेट बनाने की आवश्यकता है। इसलिए मैं कई एचटीएमएल-टेम्पलेट्स बनाना चाहता हूं और उन्हें मुख्य एचटीएमएल फाइल (जैसे एनजी-एंजुलर 1 में शामिल करना)

लेकिन मैं मुख्य टेम्पलेट में उप-टेम्पलेट्स को कैसे शामिल कर सकता हूं?

उदाहरण:

<!-- test.html --> 

<div> 
    this is my Sub-Item 
    <!-- include sub1.html here--> 
</div> 
<div> 
    this is second Sub-Item 
    <!-- include sub2.html here--> 
</div> 

-

<!-- sub1.html --> 
<div> 
    <button>I'am sub1</button> 
</div> 

-

<!-- sub2.html --> 
<div> 
    <div>I'am sub2</div> 
</div> 

Answer 1

आप उप 1 उप 2 आदि जैसे घटक बना सकते हैं और उन बच्चों के घटकों पर इन HTML फ़ाइलों को टेम्पलेट के रूप में जोड़ें।

मुख्य एचटीएमएल पर क्रमशः घटक चयनकर्ताओं को कॉल करें। यह काम करेगा

Answer 2

मुझे आप सब के पहले बता ng-includeAngular1.x से नहीं है, चलो रों Angular2 द्वारा समर्थित स्पष्ट रूप से $CompileAngular2 में मौजूद नहीं है। तो, आप CRF-ComponentFactoryResolver के साथ आगे बढ़ सकते हैं जैसा कि यहां कोणीय संदर्भ के साथ HTML को गतिशील रूप से जोड़ने के लिए दिखाया गया है।

डेमो - (सीएफआर): https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview

---

अपने HTML टुकड़ा कोणीय संदर्भ है, तो आप का उपयोग करना चाहिए CFR-ComponentFactoryResolver।

sub1.html में रूप में, आप button, आप इसे क्लिक करें और उसके क्लिक करें घटना आग चाहते हो सकता है है। यह नीचे के रूप में दिखाया गया है,

आप बहुत कुछ कर सकते CRF साथ CFR के साथ प्राप्त किया जा सकता है। यह शायद सबसे आसान उदाहरण है।

@Component({ 
    selector: 'my-app', 
    template: ` 

    <button (click)="addComponents()">Add HTML (dynamically using CRF)</button> 

    <h1>Angular2 AppComponent</h1> 
    <hr> 

    <div> 
    <h5>sub1.html goes here</h5> 
     <div class="container"> 
     <template #subContainer1></template> 
     </div> 
    </div> 

    <hr> 
    <h5>sub2.html goes here</h5> 
    <div class="container"> 
     <template #subContainer2></template> 
    </div> 
    `, 

}) 
export class App { 
    name:string; 
    @ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef; 
    @ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef; 
    constructor(
     private compFactoryResolver: ComponentFactoryResolver 
    ) { 
     this.name = 'Angular2' 
    } 

    addComponents() { 

     let compFactory: ComponentFactory; 

     compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component); 
     this.subContainer1.createComponent(compFactory); 


     compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component); 
     this.subContainer2.createComponent(compFactory); 
    } 
    } 
}