Bootstrap Dropdown Angular2無法正常工作

Question

這個下拉式工作不正常，是否與我的瀏覽器有關？

我想在我的一個項目的導航欄中添加一個下拉菜單，但它並沒有打開，所以我從bootstrap中拿出了這個例子，甚至沒有在jsfiddle.net的代碼片段中工作。我使用Angular2

<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"> 
 
     Dropdown 
 
     <span class="caret"></span> 
 
     </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Answer 1

它工作時，只需添加.js文件引導和jquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"> 
 
     Dropdown 
 
     <span class="caret"></span> 
 
     </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Answer 2

基本上，下拉需要的Jquery和bootstrap.js被包括在頁面中。

在角，你不會要求jQuery。但是，bootstrap.js完全依賴於JQuery。

因此，Angular中bootstrap.js的替代方法是ngx-bootstrap（https://github.com/valor-software/ngx-bootstrap）。通過將ngx-bootstarp作爲依賴添加到您的項目中將會對您有所幫助。感謝Volarkin開發它。

示例http://valor-software.com/ngx-bootstrap/#/dropdowns