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

user2637516，

最好不要将jQuery与Angular2一起使用。

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

＆＃34; jQuery也会导致其他场景出现问题，例如在服务器或Web上预渲染Angular2应用程序 worker，因为jQuery组件期望与之一起工作物理DOM。此外，它还会增加您的应用程序的重量依赖项将导致应用程序加载更慢。用户＆＃34;

Answer 3

这是导航栏的限制（github）。所以你需要操纵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?

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

5 个答案: