jquery - 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