angular - 如何使用引导导航栏和下拉菜单(使用 Angular 7)?

标签 angular bootstrap-4 navbar

我试试这个,但是当我点击 Dropdown link nemu 时,什么也没有发生。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" routerLink="dashboard">dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="calendar">calendar</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="manager">manager</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
        </ul>
        <!--ul class="navbar-nav navbar-right">

        </ul-->
    </div>
</nav>

编辑:

我使用 https://ng-bootstrap.github.io/#/components/datepicker/overviewnavbar不要在场。

最佳答案

我在 ng-bootstrap 中找到了navbar 的文档不存在。所以我添加了 jQuery,它可以工作了。

npm install bootstrap --save
npm install jquery --save

并将其添加到 angular.json (Angular 7) 中:

"scripts": [
    "node_modules/jquery/dist/jquery.js",
    "node_modules/bootstrap/dist/js/bootstrap.js"
]

关于angular - 如何使用引导导航栏和下拉菜单(使用 Angular 7)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54185807/

相关文章:

css - 跨越 ul 的宽度跨越 li 元素的填充

css - 垫表列宽度在包含输入时不会改变

angular - 如何在初始化期间更新嵌套 ngModel 组件中的值?

css - 如何使这三个图像具有相同的高度和宽度?

html - Bootstrap 轮播图片大小正在改变

css - Bootstrap popover - 如何固定位置?

html - Bootstrap Navbar与品牌合拢

html - 如何在汉堡菜单中加入链接?

javascript - Angular 6 错误 TS8011 类型参数只能在 .ts 文件中使用

javascript - 如何清除 Angular 中组合框的选定值