Angular JS 2 - Bootstrap导航栏下拉菜单无法正常工作

Question

我正在使用使用 Angular 2（使用 CLI 创建项目）并安装了 Bootstrap。然后将 Bootstrap 的 CSS 添加到 angular-cli.json 中，样式起作用。但是当我有一个带有下拉菜单的导航栏时，它无法打开。我认为这是由于缺少 bootstrap.js，因此将其添加到 angular-cli.json 的脚本部分中，它抱怨缺少 jQuery！！ 然后添加了 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"],

- user1342558

Answer 1

我建议使用一个提供了Angular 2和Bootstrap本地集成的库。 https://ng-bootstrap.github.io 这个库有出色的API，并且易于使用。好消息是，它还支持下拉菜单，如此例所示: https://ng-bootstrap.github.io/#/components/dropdown 使用上述库，您无需安装jQuery或Bootstrap的JS（只需要CSS），并且下拉菜单非常容易使用（请注意< strong> ngbDropdown 和< strong> 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

- pkozlowski.opensource

---

非常感谢您的时间和示例。但是要求构建一个导航栏，似乎并不像原生的bootstrap那么容易。如果我有错，请纠正我。 - user1342558

@user1342558 我认为这甚至比制作导航栏更容易，例如：http://plnkr.co/edit/4GJl2bBLsjHGhEjn48hx?p=preview - pkozlowski.opensource

看起来这是针对Angular 4和Bootstrap 4的，但它们仍处于α版本。你能指向一个Angular 2 Bootstrap 3的解决方案吗？ - Nikhil Das Nomula

Answer 2

我研究了ng2-bootstrap的文档，没有看到导航栏已经完成。在看到后会进行重构。

然而，我找到了一篇非常简单的教程，不需要使用jquery。https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

请注意，作者引入了媒体查询的引用

  @media(min-width: 768px){...}

如果您已经有bootstrap css样式链接，这是不必要的。
我前往我的导航栏组件并添加了必要的属性和点击处理程序。

  isIn = false;

 toggleState() { // click handler for navbar toggle
    const bool = this.isIn;
    this.isIn = bool === false ? true : false;
 }

在导航栏HTML模板上添加了点击处理程序

 <button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()">

我在要折叠的

元素上添加了ngClass

<div id="navbar" class="navbar-collapse collapse"
  [ngClass]="{'in':isIn}">

- Winnemucca

Answer 3

是的，也许它适用于您，但有时在Angular中使用Jquery可能会导致问题。因为bootstrap.js可能会在内部更改dom元素，所以在某些情况下可能会引起一些问题。

但我建议您使用ng2-bootstrap模块，它将允许您访问已经为angular2方式编写的Bootstrap组件。在这里，您还可以找到Dropdown组件。

- Vinay Pandya

Answer 4

你可以直接复制并粘贴这些链接到index.html文件中

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

- Emmanuel Arthur Mandeng