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