twitter-bootstrap Bootstrap 的可折叠导航栏不适用于 Angular2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37884824/
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
Bootstrap's collapsible navbar doesn't work with Angular2
提问by user2637516
I've not managed to get the collapsible navbar in Bootsrap 3 to work correctly with Angular2. On reducing the window width, the menu is correctly replaced by the burger button, but clicking it doesn't display the drop-menu. The button activates (goes dark) but that's it. I'd like to know if there's a workaround other than perhaps using ng-bootstrap?
我还没有设法让 Bootsrap 3 中的可折叠导航栏与 Angular2 一起正常工作。在减小窗口宽度时，菜单会被汉堡按钮正确替换，但单击它不会显示下拉菜单。按钮激活（变暗），但就是这样。我想知道除了使用 ng-bootstrap 之外是否还有其他解决方法？
Example: Plunk
示例：Plunk
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapseNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='#'>Angular2 & Bootstrap</a>
</div>
<div class="collapse navbar-collapse" id="collapseNav">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#">Home</a></li>
<li><a class="navbar-brand" href='#'>Item</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://angular.io/">Angular</a></li>
</ul>
</div>
</div>
回答by HaveSpacesuit
This is what eventually did it for me (using Anguar 2 and Bootstrap 4.0.0-alpha.6):
这就是最终为我做的事情（使用 Anguar 2 和 Bootstrap 4.0.0-alpha.6）：
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button type="button" class="navbar-toggler navbar-toggler-right" (click)="isExpanded = !isExpanded" [attr.aria-expanded]="!isExpanded" aria-controls="navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" [routerLink]="['/home']">Home</a>
<div class="collapse navbar-collapse" id="navbarContent" [ngbCollapse]="!isExpanded">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class='nav-link' [routerLink]="['/page1']">Page 1</a></li>
<li class="nav-item"><a class='nav-link' [routerLink]="['/page2']">Page 2</a></li>
</ul>
<ul class="navbar-nav navbar-right">
<li><a (click)='signOut()' style='cursor: pointer;'><span class="glyphicon glyphicon-log-in"></span> Sign Out</a></li>
</ul>
</div>
</nav>
回答by Gerard van der Stelt
user2637516,
用户2637516，
It is preferred not to use jQuery with Angular2.
最好不要在 Angular2 中使用 jQuery。
https://www.quora.com/What-are-the-reasons-for-avoiding-jQuery-in-AngularJS
https://www.quora.com/What-are-the-reasons-for-avoiding-jQuery-in-AngularJS
"jQuery will also cause problems for other scenarios, like pre-rendering the Angular2 application on the server or in a web worker, because jQuery components are expecting to work with the physical DOM. Plus it weights your application down with additional dependencies that will cause the application to load more slowly for a user."
“jQuery 还会导致其他场景出现问题，例如在服务器或 Web Worker 中预渲染 Angular2 应用程序，因为 jQuery 组件期望与物理 DOM 一起工作。此外，它会因额外的依赖项而加重您的应用程序的负担，这将导致为用户加载更慢的应用程序。”
回答by Towhid
This is a limitation of navbar (https://github.com/valor-software/ngx-bootstrap/issues/540). So you need to manipulate the DOM element.
这是导航栏的限制（https://github.com/valor-software/ngx-bootstrap/issues/540）。所以你需要操作DOM元素。
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" routerLink="/">
<img src="assets/images/logo.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right" >
<li class="hidden">
<a></a>
</li>
<li><a routerLink="/" (click)="onMenuClick()">Home</a></li>
<li><a routerLink="/about" (click)="onMenuClick()">About</a></li>
</ul>
</div>
And on .ts file your minimal code shoul be:
在 .ts 文件上，您的最小代码应该是：
import { Component, ElementRef, Renderer } from '@angular/core';
export class HeaderComponent {
constructor(private el: ElementRef, private renderer: Renderer) {
}
onMenuClick() {
//this.el.nativeElement.querySelector('.navbar-ex1-collapse') get the DOM
//this.renderer.setElementClass('DOM-Element', 'css-class-you-want-to-add', false) if 3rd value is true
//it will add the css class. 'in' class is responsible for showing the menu, remove it.
this.renderer.setElementClass(this.el.nativeElement.querySelector('.navbar-ex1-collapse'), 'in', false);
}
}
}
回答by Oyvind Fredstie
I experienced the same problem, searched for issues in the navbar component but found no one. Eventually got the burger menu button to work by adding these two lines to my index.html file:
我遇到了同样的问题，在导航栏组件中搜索问题，但没有找到。通过将这两行添加到我的 index.html 文件中，最终让汉堡菜单按钮起作用：
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
Jquery need to be listed first of these two. Also, your paths might be different than the paths listed in this code sample.
Jquery 需要列在这两个中的第一个。此外，您的路径可能与此代码示例中列出的路径不同。
回答by chris08002
ng2-bootsrap works very well, except that I can not activate the animation.
ng2-bootsrap 效果很好，只是我无法激活动画。
This post explains how to build the navbar toggle:
这篇文章解释了如何构建导航栏切换：
