1

我将 ngx-bootstrap 用于 Bootstrap 4 组件，但 ngx-bootstrap 和 ng-boostrap 都没有导航栏组件。github问题建议使用ngx-bootstrap collapse 模块，但我一直在努力让它工作，尤其是使用下拉链接。

例如，我应该如何使用 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>

谢谢！

4

0 回答 0