NgbModal खुली विधि

Question

को कॉल करने के लिए सर्वोत्तम अभ्यास NgbModal के साथ खिलौना और खुले विधि ->open(content: string | TemplateRef<any>, options: NgbModalOptions) < - टेम्पलेट कोड से कहीं और से ट्रिगर करना चाहते हैं। मेरे मामले में मैं अपने घटक की .ts फ़ाइल में विधि चलाते समय एक स्ट्रिंग को पैरामीटर के रूप में पास करना चाहता हूं। एचटीएमएल फाइल में एक बटन के माध्यम से विधि को चलाते समय: <button (click)="open(content)">Launch demo modal</button>, एचटीएमएल फाइल में <template></template> के भीतर से सभी कोड के साथ कोड बहुत अच्छा काम करता है।

इस के साथ कुछ हासिल करने के लिए कोशिश कर रहा है:

logoutScreenOptions: NgbModalOptions = { 
    backdrop: 'static', 
    keyboard: false 
}; 

lockedWindow: NgbModalRef; 

lockedScreenContent= ` 
    <template #content let-c="close" let-d="dismiss"> 
     <div class="modal-header" style="text-align: center"> 
      <h3 class="modal-title">Title</h3> 
     </div> 
     <div class="modal-body"> 
      <p>Body</p> 
     </div> 
     <div class="modal-footer"> 
      <p>Footer</p> 
     </div> 
    </template> 
`; 

openLockedScreen(){ 
    this.open(this.lockedScreenContent); 
} 

open(content) { 
    console.log(content); 
    this.lockedWindow = this.modalService.open(content, this.logoutScreenOptions); 
    this.lockedWindow.result.then((result) => { 
     this.closeResult = `Closed with: ${result}`; 
    }, (reason) => { 
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
    }); 
} 

कोड कोई त्रुटि के साथ चलता है, और मॉडल की तरह तो खोलता है: Modal without rendered content ... जो वास्तव में मैं क्या चाहते हैं नहीं है!

इसके अलावा इस तरह की कोशिश की, वास्तव में एक ही परिणाम के साथ:

lockedScreenContent= ` 
    <div class="modal-header" style="text-align: center"> 
     <h3 class="modal-title">Title</h3> 
    </div> 
    <div class="modal-body"> 
     <p>Body</p> 
    </div> 
    <div class="modal-footer"> 
     <p>Footer</p> 
    </div> 
`; 

मैं क्या याद आ रही है? क्या "स्ट्रिंग" पैरामीटर के रूप में स्ट्रिंग को पास करना संभव नहीं होगा?

टीएस फ़ाइल से टेम्पलेट Ref पैरामीटर का उपयोग करने के तरीके के बारे में मेरे सिर को पाने के लिए नहीं देख सकता!

Answer 1

आज के रूप में openhttps://ng-bootstrap.github.io/#/components/modal की विधि निम्न हस्ताक्षर है: open(content: string | TemplateRef<any>, options: NgbModalOptions)। - वास्तव में यह ज्यादातर को जोड़ा गया है

• string
• TemplateRef

string -typed तर्क बहुत ही दिलचस्प नहीं है: आप इस हस्ताक्षर से देख सकते हैं आप के रूप में सामग्री उपलब्ध कराने एक मॉडल खोल सकते हैं सहायता डीबगिंग/इकाई परीक्षण। इसका उपयोग करके आप बस पास कर सकते हैं ... अच्छी तरह से, टेक्स्ट का एक टुकड़ा, बिना मार्कअप के कोणीय निर्देशों के। जैसे कि यह वास्तव में एक डीबग उपकरण है और वास्तविक जीवन परिदृश्य में उपयोगी कुछ नहीं है।

TemplateRef तर्क अधिक दिलचस्प है क्योंकि यह आपको मार्कअप + निर्देश प्रदर्शित करने की अनुमति देता है। पर <template #refVar>...content goes here...</template> अपने घटक टेम्पलेट में कहीं भी एक हाथ प्राप्त कर सकते हैं (एक घटक का एक टेम्पलेट जिसमें से आप एक मोडल खोलने की योजना बना रहे हैं)। जैसे TemplateRef तर्क शक्तिशाली है क्योंकि यह आपको मार्कअप, निर्देश, अन्य घटकों इत्यादि की अनुमति देता है। नकारात्मकता यह है कि TemplateRef केवल तभी उपयोगी होता है जब आप किसी टेम्पलेट वाले घटक से मोडल खोल रहे हों।

मुझे एक इंप्रेशन मिला है कि आप इस सुविधा की तलाश कर रहे हैं जो योजनाबद्ध है लेकिन अभी तक कार्यान्वित नहीं है - सामग्री के रूप में एक घटक प्रकार के साथ एक मोडल खोलने की क्षमता। यह निम्नानुसार काम करेगा: modalService.open(MyComponentWithContent)। जैसा कि मैंने उल्लेख किया है कि यह रोडमैप का हिस्सा है लेकिन अभी तक लागू नहीं हुआ है। आप https://github.com/ng-bootstrap/ng-bootstrap/issues/680