एंजुलर 2 घटकों के रूप में बूटस्ट्रैप मोड को गतिशील रूप से कैसे बनाएं?

Question

मूल शीर्षक: कोणीय 2

में गतिशील रूप से संलग्न (एचटीएमएल) घटक को प्रारंभ नहीं कर सकता मैं एक निर्देश है कि प्रारंभ पर शरीर के लिए एक मॉडल संलग्न कर देता है बना लिया है। जब एक बटन (निर्देश में इंजेक्शन के साथ) इस मोडल आग पर क्लिक किया जाता है। लेकिन मैं चाहता हूं कि इस मॉडल की सामग्री एक और घटक हो (वास्तव में मैं मोडल घटक बनना चाहता हूं)। ऐसा लगता है कि मैं घटक को प्रारंभ नहीं कर सकता।

http://plnkr.co/edit/vEFCnVjGvMiJqb2Meprr?p=preview

मैं अपने कंप्यूटर अनुप्रयोग के लिए मेरे घटक

'<div class="modal-body" #theBody>' 
      + '<my-comp></my-comp>' + 
'</div> 

Answer 1

अद्यतन के टेम्पलेट बनाने के लिए कोशिश कर रहा हूँ:

यहाँ मैं क्या किया है की एक plunker है 2.0.0 फ़ाइनल

Plunker example >= 2.0.0

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ModalComponent, CompComponent], 
    providers: [SharedService], 
    entryComponents: [CompComponent], 
    bootstrap: [ App, ModalComponent ] 
}) 
export class AppModule{} 

export class ModalComponent { 
    @ViewChild('theBody', {read: ViewContainerRef}) theBody; 

    cmp:ComponentRef; 

    constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) { 

    sharedService.showModal.subscribe(type => { 
     if(this.cmp) { 
     this.cmp.destroy(); 
     } 
     let factory = this.componentFactoryResolver.resolveComponentFactory(type); 
     this.cmpRef = this.theBody.createComponent(factory) 
     $('#theModal').modal('show'); 
    }); 
    } 

    close() { 
    if(this.cmp) { 
     this.cmp.destroy(); 
    } 
    this.cmp = null; 
    } 
} 

सुझाव

एक आवेदन SharedService में राज्य बदलने के लिए या एक विधि है कि एक Observable एक मूल्य के उत्सर्जन करने का कारण बनता है कॉल करता है और ग्राहक एक अलग आवेदन तो emitter में है, तो , ग्राहक में कोड उत्सर्जक के NgZone में निष्पादित किया जाता है।

इसलिए जब SharedService उपयोग

class MyComponent { 
    constructor(private zone:NgZone, private sharedService:SharedService) { 
    private sharedService.subscribe(data => this.zone.run() => { 
     // event handler code here 
    }); 
    } 
} 

में एक नमूदार की सदस्यता और अधिक विवरण कैसे परिवर्तन का पता लगाने को गति प्रदान करने को देखने के Triggering Angular2 change detection manually

मूल

गतिशील रूप से जोड़ा एचटीएमएल कोणीय द्वारा कार्रवाई नहीं कर रहा है और के लिए परिणामस्वरूप घटकों या निर्देशों को तत्काल या जोड़ा नहीं जा सकता है।

आप Angulars जड़ घटक (AppComponent) का उपयोग कर DynamicComponentLoader (बहिष्कृत) ViewContainerRef.createComponent() (Angular 2 dynamic tabs with user-click chosen components) के बाहर घटकों नहीं जोड़ सकते।

मुझे लगता है कि सबसे अच्छा तरीका बाहर एक 2 घटक Angulars जड़ घटक प्रत्येक पर bootstrap() फोन और एक साझा सेवा का उपयोग करने के लिए है बातचीत करने के लिए तैयार करना है:

var sharedService = new SharedService(); 

bootstrap(AppComponent, [provide(SharedService, {useValue: sharedService})]); 
bootstrap(ModalComponent, [provide(SharedService, {useValue: sharedService})]); 

Plunker example beta.17
Plunker example beta.14

@Injectable() 
export class SharedService { 
    showModal:Subject = new Subject(); 
} 

@Component({ 
    selector: 'comp-comp', 
    template: `MyComponent` 
}) 
export class CompComponent { } 


@Component({ 
    selector: 'modal-comp', 
    template: ` 
    <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel"> 
    <div class="modal-dialog largeWidth" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title" id="theModalLabel">The Label</h4></div> 
     <div class="modal-body" #theBody> 
     </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button> 
    </div></div></div></div> 
` 
}) 
export class ModalComponent { 
    cmp:ComponentRef; 
    constructor(sharedService:SharedService, dcl: DynamicComponentLoader, injector: Injector, elementRef: ElementRef) { 
    sharedService.showModal.subscribe(type => { 
     if(this.cmp) { 
     this.cmp.dispose(); 
     } 
     dcl.loadIntoLocation(type, elementRef, 'theBody') 
     .then(cmp => { 
     this.cmp = cmp; 
     $('#theModal').modal('show'); 
     }); 
    }); 
    } 

    close() { 
    if(this.cmp) { 
     this.cmp.dispose(); 
    } 
    this.cmp = null; 
    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
<h1>My First Attribute Directive</h1> 
<button (click)="showDialog()">show modal</button> 
<br> 
<br>`, 
}) 
export class AppComponent { 
    constructor(private sharedService:SharedService) {} 

    showDialog() { 
    this.sharedService.showModal.next(CompComponent); 
    } 
}