दिलचस्प पोस्ट
डेल्फी विंडोज सर्विस डिजाइन जावा में नल क्या है? मैं नोड में वैश्विक मॉड्यूल कैसे आयात करूं? मुझे "त्रुटि: मॉड्यूल" मॉड्यूल "नहीं मिल सकता है? मैं एक बटन पर ड्रॉएबल कैसे हट सकता हूं? ऐडंस लोड करना जब एक्सेल को प्रोग्रामेटिक रूप से इंस्टाल्ट किया जाता है ईपीप्लस का उपयोग करके चित्रों को एक्सेल में जोड़ना JavaScript के साथ डीकोडिंग यूआरएल पैरामीटर dplyr संक्षेप: ".drop = FALSE" के समकक्ष समूहों को निर्गम में शून्य लंबाई के साथ रखने के लिए Baseadapter का उपयोग करके listview को कैसे अनुकूलित करें क्या यह सुरक्षित – 1 के साथ उथले क्लोन करने के लिए सुरक्षित है, कमिट बनाएं, और फिर से अपडेट खींचें? बूटस्ट्रैप 3 – नेविबार के अंदर इनपुट चौड़ाई को अधिकतम कैसे करें सूची की एक श्रृंखला के कार्टेसीयन उत्पाद प्राप्त करें? HTML5 <audio> मात्रा को नियंत्रित करने के लिए jQuery का उपयोग करना PHP + कर्ल, HTTP पोस्ट नमूना कोड? 'Const char ' से 'LPCWSTR' तक पैरामीटर परिवर्तित नहीं किया जा सकता

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

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

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

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

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

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

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

Solutions Collecting From Web of "कैसे गतिशील 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); } }