दिलचस्प पोस्ट
पीडीओ तैयार एक क्वेरी में एकाधिक पंक्तियों को सम्मिलित करता है नेस्टेड स्क्रॉल वीव के अंदर रिसाइक्लर का उपयोग कैसे करें? दृश्य स्टूडियो 2015 में अनुपलब्ध MVC टेम्पलेट एक गुण फाइल में एक पासवर्ड की सुरक्षा स्थानीयहोस्ट बनाम 127.0.0.1 एक "अपूर्ण रूप से निर्मित वस्तु" क्या है? रेल 4: उपलब्ध डेटाटाइपों की सूची जावा का उपयोग करके सेलेनियम वेबड्राइवर में माउसओवर फ़ंक्शन कैसे करें? मूल तत्वों को विरासत में लाने से बाल तत्व को रोकने के लिए CSS डेटाबेस विरासत के लिए तकनीक? आर में एक स्ट्रिंग कन्टाटाइनेशन ऑपरेटर बनाना जावास्क्रिप्ट में फ़्लोट परिशुद्धता के साथ काम करना SHA1 बनाम एमडी 5 बनाम SHA256: जो एक PHP लॉगिन के लिए उपयोग करना है? .NET में माइक्रोसॉफ्ट.ऑफ़िस.इंटरॉप.एक्ससेल का उपयोग करने के लिए मुझे कौन से संदर्भ की आवश्यकता है? विशिष्ट आईडी मूल्यों के आधार पर MySQL आदेश

कैसे गतिशील Angular2 घटकों के रूप में बूटस्ट्रैप modals बनाएँ?

मूल शीर्षक : एंजियल 2 में गतिशील रूप से संलग्न (HTML) घटक को प्रारंभ नहीं किया जा सकता

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

यहां मैंने जो किया है उसका एक प्लंकर है:

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

मैं अपने घटक के टेम्पलेट को मेरे कॉम्प की कोशिश कर रहा हूं

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

वेब के समाधान से एकत्रित समाधान "कैसे गतिशील Angular2 घटकों के रूप में बूटस्ट्रैप modals बनाएँ?"

2.0.0 फाइनल के लिए अद्यतन

प्लंकर उदाहरण> = 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; } } 

संकेत

यदि एक आवेदन में राज्य को बदल दिया गया है, तो एक ऐसा तरीका कॉल करता है जिससे कोई मान NgZone और ग्राहक किसी अन्य अनुप्रयोग में है, तो NgZone , ग्राहक के कोड को NgZone में NgZone में निष्पादित किया जाता है।

इसलिए जब SharedService उपयोग में एक अवलोकन के लिए सदस्यता SharedService

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

अधिक विवरण के लिए कैसे परिवर्तन का पता लगाने के लिए ट्रिगर देखना टॉगलिंग Angular2 परिवर्तन पहचान मैन्युअल रूप से

मूल

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

आप डैनैंटिक कम्पेनेंट DynamicComponentLoader (पदावनत) ViewContainerRef.createComponent() ( प्रयोक्ता द्वारा क्लिक किए गए घटकों के साथ DynamicComponentLoader 2 गतिशील टैब ) का उपयोग करते हुए कोणीय रूट घटक (ऐपकॉम्पनेन्ट) के बाहर के घटक जोड़ नहीं सकते हैं।

मुझे लगता है कि सबसे अच्छा तरीका अंगुलियों के रूट घटक के बाहर एक दूसरा घटक बनाना है, प्रत्येक पर bootstrap() को कॉल करना और संचार करने के लिए साझा सेवा का उपयोग करना है:

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

प्लंकर उदाहरण beta.17
प्लंकर उदाहरण 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); } }