使用下拉菜单中的选项打开模式 - Angular 2 + ngx

Question

将 ngx-bootstrap (4) 与 Angular 2/CLI 结合使用。

尝试使用下拉列表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>

<ng-template #modal1>
</ng-template

<ng-template #modal2>
</ng-template

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}

显然这个例子行不通。但我试图找到一种方法让选项值保留模板，然后在 selected 时将模板传递到 openModal，然后打开模式。

我确实找到了这个人的问题，但没有答案，而且他在下拉菜单中使用了点击事件，我相信这并没有真正触发。 ngx-bootstrap calling a modal from a dropdown

Answer 1

您可以通过在 select

的 (change) 事件中打开模式来实现此目的

<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 的多个引用

@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

Open a Modal Using an Option from a Dropdown - Angular 2 + ngx

angular

twitter-bootstrap

angular-cli

twitter-bootstrap-4

ngx-bootstrap