angle2アプリケーションでブートストラップドロップダウンを使用する方法

Question

私の現在のプロジェクトでは、ドロップダウンを追加したいと思います。このコードは、このlinkから取得しました。下のコードを追加すると、例のようにドロップダウンが表示されますが、クリックすると何も起こりません。

<li class="dropdown"> 
       <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li> 
        <li class="divider"></li> 
        <li><a [routerLink]="['/apiai']">API AI</a></li> 
        <li class="divider"></li> 
        <li><a [routerLink]="['/apiai']">SQL Exception</a></li> 
       </ul> 
      </li> 

私はあなたが角度の2プロジェクトにブートストラップドロップダウンを使用する方法を教えてくださいすることができ3.3.7ブートストラップバージョンを使用して、私のindex.cshtml

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> 
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 

で以下の行を追加しました？

プラディープ

Answer 1

NGX-ブートストラップは、角度のプロジェクトのために利用可能である。（バージョン2以上）。 http://valor-software.com/ngx-bootstrap/#/dropdowns

あなたは、あなたのプロジェクトでそれを使用することができます。ここでは

はリンクです。

手順

取得するnpm install ngx-bootstrap --save

インポートドロップダウンモジュール

// RECOMMENDED (doesn't work with system.js) 
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; 
// or 
import { BsDropdownModule } from 'ngx-bootstrap'; 

@NgModule({ 
    imports: [BsDropdownModule.forRoot(),...] 
}) 
export class AppModule(){} 

<div class="btn-group" dropdown> 
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"> 
    Button dropdown <span class="caret"></span> 
    </button> 
    <ul *dropdownMenu class="dropdown-menu" role="menu"> 
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> 
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> 
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li> 
    <li class="divider dropdown-divider"></li> 
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a> 
    </li> 
    </ul> 
</div>