使用下拉菜单中的选项打开模态 - 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的(change)事件中打开模态来实现>

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 装饰器来装饰 modal-component 来获得多个引用

You should be having multiple references of the modal-component by decorating them with @ViewChild decorator

@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()
    }
  }

现场演示

这篇关于使用下拉菜单中的选项打开模态 - Angular 2 + ngx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！