如何在angular2應用程序中使用Bootstrap下拉菜單

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> 

我使用的引導版本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> 

你能告訴我怎麼用引導下拉在角2項目？

Pradeep

Answer 1

ngx-bootstrap可用於Angular Project。（高於版本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>