角度 - ブートストラップ：モーダルがボタンのドロップダウンメニューから開かない

Question

私はapp、sideNav、wallFormの3つのコンポーネントを持っています。アプリのヘッダーには、sideNavをドロップするボタンがあります。 sideNavにはwallFormモーダルを開くための追加ボタンがあります。これはng2-bootstrapモーダルです。ドロップダウンメニューはうまくロードされますが、追加ボタンをクリックするとモーダルロードと画面がグレーアウト（無効）されますが、モーダルは前面に表示されません。ブラウザの開発者ツールで要素を調べることができるので、ロードされていることがわかります。私はモーダルのZ-インデックスを非常に高い数値に設定しようとしましたが、ドロップダウンメニューのZ-インデックスよりもはるかに高くなりましたが、それは助けになりませんでした。どのようにしてモーダルを動作させるか、つまり上に表示するにはどうすればよいですか？以下

コード：

<!--app.html--> 
 
<div> 
 
    <!-- Nav bar --> 
 
    <nav class="navbar navbar-color"> 
 
     <div class="container-fluid" id="nav_center"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <div class="btn-group" *ngIf="authenticated"> 
 
        <button type="button" class="nav-features nav-expand-button dropdown-toggle" 
 
          (click)="isCollapsed = !isCollapsed" *ngIf="authenticated" id="navFeaturesButton" 
 
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 

 
         <i class="fa fa-cube"></i> 
 
         <span>Walls</span> 
 
        </button> 
 
        <div class="dropdown-menu sideNav"> 
 
         <div><i class="fa fa-caret-up fa-2x"></i></div> 
 
         <side-nav id="sidenav"></side-nav> 
 
        </div> 
 
       </div> 
 
       
 
      </div> 
 

 
     </div><!-- /.container-fluid --> 
 
    </nav> 
 
</div>

<!-- sidenav.html --> 
 

 
<div class="nav-features-content"> 
 
    <div> 
 

 
     <ul *ngIf="showContent"> 
 
      <!--<li *ngFor="let wall of walls" class="wallListItem">--> 
 
      <li *ngFor="let wall of walls | filter:[{Title: searchTerm}]"> 
 
       <div class="themeColor"></div> 
 
       <a [routerLink]="['/wall', wall.Id]"> {{wall.Item.Title}}</a> 
 
       <span class="glyphicon glyphicon-option-horizontal sideNav-ellipsis" ></span> 
 
      </li> 
 

 
     </ul> 
 
     <br /> 
 
     <div class="addWall" (click) ="wfModal.showNew()" > 
 
      + add wall 
 
     </div> 
 

 
    </div> 
 
</div> 
 
<!--Modal dialog--> 
 

 
<wall-form #wfModal></wall-form> 
 
<!--this is the modal body-->

<div bsModal #wallFormModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
 
    aria-labelledby="mySmallModalLabel" aria-hidden="true" 
 
    style="position:absolute; top:30px; right: 30px;"> 
 
    <div class="modal-dialog modal-md"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" aria-label="Close" (click)="hide()"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <span class="modal-title">{{modalTitle}}</span> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <div class="panel"> 
 
        <form #wallForm="ngForm" (ngSubmit)="save()" class="wallForm"> 
 
         <!-- content excluded for brevity --> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

なぜブートストラップのドロップダウンで問題が発生しているのか説明できません。私はまた、ブートストラップドロップの問題も抱えていました。しかし、ここでは可能な回避策があります。あなたのドロップダウンのための角度プラグインを使ってみてください、私はこの1つを使用しますhttps://github.com/pleerock/ng2-dropdown。私もここでは、ここでhttps://www.npmjs.com/package/ng2-modal

を見つけng2-modalが最終製品plunkr