使用下拉菜单中的选项打开模态-Angular 2 + ngx [英] Open a Modal Using an Option from a Dropdown - Angular 2 + ngx
问题描述
在Angular 2/CLI中使用ngx-bootstrap(4).
Using ngx-bootstrap (4) with Angular 2/CLI.
尝试使用下拉列表选择要打开的模式.如果我只为每个模式有一个按钮(而不是下拉菜单),则该模式当前可以正常工作,但是要求调用一个下拉菜单.
Trying to use a dropdown list to select which modal to open. The modal currently works fine if I just have a button for each modal (not a dropdown), but the requirements call for a dropdown.
我尝试过类似的事情
<select class="detailsOption" (change)="openModal($event.target.value)">
<option value="">Select Option</option>
<option value={{modal1}} >Option 1</option>
<option value={{modal2}}>Option 2</option>
</select>
<ng-template #modal1>
</ng-template
<ng-template #modal2>
</ng-template
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
显然,此示例不起作用.但是我试图找到一种方法来让选项值保存模板,然后在选择时将模板传递给openModal,然后打开模态.
Obviously this example wouldn't work. But I was trying to find a way have the option values hold the template, and then when selected, would pass the template into openModal and then open the modal.
我确实找到了这个人的问题,但是没有答案,而且他在下拉菜单中使用了点击事件,但我相信这并不会真正触发. ngx-bootstrap从下拉菜单中调用模式
I did find this guys question but it had no answers and also he was using click events in a drop down which don't really trigger I believe. ngx-bootstrap calling a modal from a dropdown
推荐答案
您可以通过在 select
(更改)事件中打开模式来实现此目的>
You can achieve this by opening the modal in the (change)
event of the select
<select class="detailsOption" (change)="openModal($event.target.value)">
<option value="">Select Option</option>
<option value="modal1" >Option 1</option>
<option value="modal2">Option 2</option>
</select>
<!-- Option 1 -->
<common-modal #childModalOption1 [title]="'Option1 modal'">
<div class="modal-body">Option 1 selected Modal </div>
</common-modal>
<!-- Option 2 -->
<common-modal #childModalOption2 [title]="'Option 2modal'">
<div class="modal-body">Option 2 selected Modal </div>
</common-modal>
您应该使用 @ViewChild
装饰器
@ViewChild('childModalOption1') childModalOption1 :CommonModalComponent;
@ViewChild('childModalOption2') childModalOption2 :CommonModalComponent;
您的 openModal
方法应为
openModal(event){
if(event==='modal1'){
this.childModalOption1.show()
console.log(event)
} else if(event==='modal2'){
this.childModalOption2.show()
}
}
LIVE DEMO
这篇关于使用下拉菜单中的选项打开模态-Angular 2 + ngx的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!