logo标签列表

Bootstrap的可折叠导航栏与Angular2不兼容。

twitter-bootstrapangular
5
我尚未成功地将Bootstrap 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>

添加一些代码或一个活塞。 - Luuk Skeur
添加了一个 Plunk 来演示。 - user2637516
Plunker似乎无法工作，请尝试使用jsfiddle。 - Luuk Skeur
问题现在已经解决 - 在index.html中缺少jQuery和bootstrap.js。 - user2637516
5个回答
10

这就是最终让我成功（使用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>
这个如何展开/折叠？ - JordanGS
如果屏幕宽度低于某个阈值，菜单项将不再显示在栏上。相反，当点击时，您会得到一个汉堡菜单来列出这些项目。 - HaveSpacesuit
哦，那很遗憾不是我所期望的 :( 我想创建一个固定的左侧导航，当最小化时会折叠以仅显示图标，当展开时将显示图标和文本。 - JordanGS
你可以使用ng-class来轻松实现它。 - HaveSpacesuit
3

user2637516，

在Angular2中最好不要使用jQuery。

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

“使用jQuery还会引起其他问题，比如将Angular2应用程序预渲染到服务器或Web Worker上时，因为jQuery组件期望与物理DOM一起工作。此外，jQuery会给您的应用程序带来额外的依赖项，这会使应用程序对于用户加载得更慢。”

有没有类似于Bootstrap的可折叠导航栏的替代方案？ - Ben Winding
1
有几个方案可供选择，但其中一个是ng2-bootstrap。https://valor-software.com/ng2-bootstrap/#/我在我的一个项目中使用过它，它的使用非常简单。您还可以查看Angular的Material设计。http://www.creativebloq.com/how-to/build-a-material-design-app-with-angular-2?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_170 - Gerard van der Stelt
谢谢，我也发现这个模块很容易使用 http://www.primefaces.org/primeng/#/tabmenu - Ben Winding
2
这是navbar的限制（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);        
}

}

1
1
我遇到了同样的问题，在navbar组件中搜索问题，但没有找到。最终，通过将这两行代码添加到我的index.html文件中，成功使汉堡菜单按钮正常工作：
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

Jquery需要排在这两个中的第一位。此外，您的路径可能与此代码示例中列出的路径不同。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接