twitter-bootstrap Angular JS 2 - Bootstrap 导航栏下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40463584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS 2 - Bootstrap navbar dropdown not working
提问by user1342558
I am using angular 2 (created project using cli) and installed bootstrap.
我正在使用 angular 2（使用 cli 创建的项目）并安装了引导程序。
Then added the bootstrap CSS to angular-cli.json then the styling works but when i have the navbar with dropdown menus its not opening them. I thought is due to missing the bootstrap.jsthen added that in scripts section of angular-cli.json, it complained about jquery!! then added that.
然后将引导 CSS 添加到 angular-cli.json 然后样式工作但是当我有带有下拉菜单的导航栏时它没有打开它们。我认为是由于缺少bootstrap.js然后在 angular-cli.json 的脚本部分中添加的内容，它抱怨 jquery ！然后补充说。
It started working but i am not sure what I am doing is right.
它开始工作，但我不确定我在做什么是对的。
pasting the angular-cli.json for reference.
粘贴 angular-cli.json 以供参考。
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": ["./js/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.js"],
回答by pkozlowski.opensource
I would suggest using a library that provides a native integration of Angular 2 with Bootstrap. The https://ng-bootstrap.github.iolibrary has excellent API and is easy to use. The good news is that it also has support for dropdowns as demonstrated here: https://ng-bootstrap.github.io/#/components/dropdown
我建议使用提供 Angular 2 与 Bootstrap 本地集成的库。该https://ng-bootstrap.github.io库具有良好的API，并且易于使用。好消息是它还支持下拉列表，如下所示：https: //ng-bootstrap.github.io/#/components/dropdown
With the mentioned library you don't need to install jQuery nor Bootstrap's JS (you need CSS only) and dropdowns are super-easy to use (notice the ngbDropdownand ngbDropdownToggledirectives):
使用上述库，您不需要安装 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>
And hey, there is even a live example for you: http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview
嘿，甚至还有一个活生生的例子：http: //plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview
回答by Winnemucca
I went through the ng2-bootstrap documentation. Did not see that the navbar was completed yet. Will refactor when I see it.
我浏览了 ng2-bootstrap 文档。没有看到导航栏已经完成了。当我看到它时会重构。
However, I did come across a very simple tutorial that does not require you to use jquery. https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b
但是，我确实遇到了一个非常简单的教程，它不需要您使用 jquery。 https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b
Notice that the author puts in a reference to a media query
请注意，作者引用了媒体查询
? @media(min-width: 768px){...}
? @media(最小宽度：768px){...}
If you already have bootstrap css style link this is not necessary.
went to my navbar component and added the necessary property and click handler
如果您已经有 bootstrap css 样式链接，则不需要此链接。
转到我的导航栏组件并添加必要的属性和单击处理程序
isIn = false;
toggleState() { // click handler for navbar toggle
const bool = this.isIn;
this.isIn = bool === false ? true : false;
}
Added the click handler on the navbar html template
在导航栏 html 模板上添加了点击处理程序
<button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()">
Added ngClassto the div that I wanted to collapse
将ngClass添加到我想要折叠的 div
<div id="navbar" class="navbar-collapse collapse"
[ngClass]="{'in':isIn}">
回答by Emmanuel Arthur Mandeng
you can just copy and paste those links in the index.html
您可以将这些链接复制并粘贴到 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>
回答by Vinay Pandya
yes may be it works for you, Sometime using Jquery with Angular may cause problem. bcz bootstrap.js may change dom element internaly, so it may cause some problem in some cases.
是的，它可能适合您，有时将 Jquery 与 Angular 一起使用可能会导致问题。bcz bootstrap.js 可能会在内部更改 dom 元素，因此在某些情况下可能会导致一些问题。
But i recommends you to use ng2-bootstrapmodule, which will allow your access Bootstrap components which are already written for angular2 way. here you can also find your Dropdowncomponent.
但我建议您使用ng2-bootstrap模块，这将允许您访问已经为 angular2 方式编写的 Bootstrap 组件。在这里您还可以找到您的下拉组件。
