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，

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

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

“jQuery 还会在其他场景中造成问题，例如在服务器或 Web Worker 中预渲染 Angular2 应用程序，因为 jQuery 组件期望与物理 DOM 一起工作。此外，它会因为额外的依赖项而降低应用程序的重量，从而导致应用程序对用户来说加载速度会更慢。”