twitter-bootstrap – Bootstrap的可折叠导航栏不适用于Angular2

发布时间：2020-12-17 20:40:38 所属栏目：安全来源：网络整理

导读：我没有设法让Bootsrap 3中的可折叠导航栏与Angular2一起正常工作.在减小窗口宽度时,菜单被汉堡按钮正确替换,但单击它不会显示下拉菜单.按钮激活(变暗),但就是这样.我想知道除了使用ng-bootstrap之外是否有其他解决方法？示例：Plunk nav class="navbar navb

我没有设法让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>

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!