使用Angular 4构建Bootstrap 4.0.0 alpha 6导航栏

Question

我正在使用ngx-bootstrap用于Bootstrap 4组件，但ngx-bootstrap和ng-boostrap都没有导航栏组件。 https://gist.github.com/anonymous/48f3e4c5ae25313dc0fe10d9ec50c3fc建议使用ngx-bootstrap折叠模块，但我很难让它工作，特别是使用下拉链接。

例如，我应该如何使用Angular 4在此导航栏上启用下拉链接和折叠功能？下拉链接有效，但下拉列表附加到导航栏，而不是正文。

<div class="navbar-container">
    <nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
        <a class="navbar-brand" routerLink="/">My App</a>
        <div class="collapse navbar-collapse">
            <div class="navbar-nav">
                <a class="nav-item nav-link" routerLink="/table" routerLinkActive="active">AR Table</a>
                <a class="nav-item nav-link" routerLink="/analytics" routerLinkActive="active">Dashboard</a>
                <a class="nav-item nav-link disabled"> Workbench</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="nav-item dropdown dropdown-append-to-body">
                    <a class="nav-link dropdown-toggle" (click)="navbar.dropdown=!navbar.dropdown" routerLink="/table" id="navbarDropdownMenuLink" [attr.aria-expanded]="dropdown" aria-controlls="collapseExample">
                        Dropdown link
                    </a>
                    <div id = "collapseExample" [collapse]="!navbar.dropdown" class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ml-auto">
            <div class="navbar-nav">
                <a class="nav-item user">User</a>
            </div>
        </div>
    </nav>
</div>

谢谢！