Jquery Angular JS 2-引导导航栏下拉菜单不工作

我正在使用angular 2（使用cli创建项目）并安装引导

然后将引导CSS添加到angular-cli.json中，然后样式就可以了，但是当我有带下拉菜单的导航栏时，它就不会打开它们。我认为是因为缺少了

bootstrap.js

，然后在angular-cli.json的scripts部分中添加了它抱怨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"],

---

是的，它可能对您有用，有时将Jquery与Angular一起使用可能会导致问题。bcz bootstrap.js可能会在内部更改dom元素，因此在某些情况下可能会导致一些问题

---

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

我建议使用一个提供Angular 2与Bootstrap本机集成的库。该库具有优秀的API，易于使用。好消息是，它还支持下拉列表，如下所示：

使用上述库，您不需要安装jQuery或Bootstrap的JS（您只需要CSS），下拉菜单非常易于使用（请注意ngbDropdown和ngbdropdownttoggle指令）：

切换下拉列表
行动-1
另一个动作
这里还有别的东西

---

嘿，这里还有一个活生生的例子：

我浏览了ng2引导文档。没有看到导航栏已经完成。当我看到它时，它会重构

然而，我确实遇到了一个非常简单的教程，它不需要您使用jquery

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

  @媒体（最小宽度：768px）{…}

如果您已经有引导css样式链接，则不需要此链接。
转到我的导航栏组件，添加了必要的属性并单击处理程序

  isIn = false;

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

在navbar html模板上添加了单击处理程序

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

在我想要折叠的div中添加了ngClass

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

---

您可以将这些链接复制并粘贴到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>

非常感谢您的时间和示例。但要求是建立导航条，似乎它不像本机引导那么容易。如果我错了，请纠正我。@user1342558我想说这更容易做导航条，例如：看起来这是用于angular 4和bootstrap 4，它仍然是alpha。你能给我们指出一个angular2引导3解决方案吗？

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