Bootstrap 的可折叠导航栏不适用于 Angular2

Question

我没有设法让 Bootsrap 3 中的可折叠导航栏与 Angular2 一起正常工作。在减小窗口宽度时，菜单被汉堡按钮正确替换，但单击它不会显示下拉菜单。按钮激活（变暗），仅此而已。我想知道除了使用 ng-bootstrap 之外是否还有其他解决方法？

示例：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>

Answer 1

这就是最终为我所做的（使用 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>

Answer 2

用户2637516，

Angular2 最好不要使用 jQuery。

https://www.quora.com/What-are-the-reasons-for-avoiding-jQuery-in-AngularJS

"jQuery 也会导致其他场景的问题，比如 在服务器或 Web 中预渲染 Angular2 应用程序 worker，因为 jQuery 组件期望与 物理 DOM。此外，它还通过额外的方式减轻您的应用程序的重量 将导致应用程序加载更慢的依赖项 用户。”

Answer 3

这是导航栏 (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>

在 .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);        
}

}

Answer 4

我遇到了同样的问题，在导航栏组件中搜索了问题，但没有找到。通过将这两行添加到我的 index.html 文件中，最终使汉堡菜单按钮起作用：

<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

Jquery 需要列在这两个的前面。此外，您的路径可能与此代码示例中列出的路径不同。

Answer 5

ng2-bootsrap 效果很好，只是我无法激活动画。

这篇文章解释了如何构建导航栏切换：

Is there a way to build the mobile nav bar in ng2-bootsrap?