twitter-bootstrap - 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

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