Angular JS 2 - Bootstrap导航栏下拉列表不起作用

Question

我正在使用angular 2(使用cli创建的项目)并安装了bootstrap.

然后将bootstrap CSS添加到angular-cli.json然后样式工作,但是当我有带下拉菜单的导航栏时它不打开它们.我以为是因为错过了bootstrap.js当时在angular-cli.json的脚本部分添加了它,它抱怨jquery !! 然后补充说.

它开始工作但我不确定我在做什么是对的.

粘贴angular-cli.json作为参考.

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": ["./js/jquery.js",     "../node_modules/bootstrap/dist/js/bootstrap.js"],

Answer 1

我建议使用一个库,它提供Angular 2与Bootstrap的本机集成.该https://ng-bootstrap.github.io库具有良好的API和易于使用.好消息是它也支持下拉菜单,如下所示:https://ng-bootstrap.github.io/#/components/dropdown

使用上面提到的库,您不需要安装jQuery也不需要安装Bootstrap的JS(只需要CSS),并且下拉菜单非常容易使用(请注意ngbDropdown和ngbDropdownToggle指令):

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

嘿,甚至有一个现实的例子:http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9？p = preview