Angular 6的Bootstrap下拉菜单 [英] Bootstrap dropdown with Angular 6

查看:59
本文介绍了Angular 6的Bootstrap下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用Angular 6在Bootstrap导航栏中创建一个下拉项.当我在线测试它时,我的代码可以正常工作:

I'm trying to create a dropdown item in a Bootstrap navbar using Angular 6. My code is working when I test it online :

<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
  <li class="nav-item dropdown" >
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

但是下拉菜单不适用于Angular6.为了将Bootstrap与Angular结合使用,我使用了以下方法:

But the dropdown does not work with Angular 6. I've used the following method in order to use Bootstrap with Angular :

ng add @ng-bootstrap/schematics

除了该下拉菜单项之外,其他一切都正常!

And everything works fine except for that dropdown item !

推荐答案

我之前遇到过相同的问题,发现如下:

I have came across the same problem earlier and I found as below:

  1. html应与 Bootstrap Layout
  2. 下拉菜单基于第三方库Popper.js构建,如 Bootstrap下拉菜单
  1. html should be binded with the class container in bootstrap as mentioned in Bootstrap Layout
  2. Dropdowns are built on a third party library Popper.js as mentioned in Bootstrap Dropdown

据我从您的问题中了解到,您没有提到必需的javascriptutil.js, bootstrap.js, popper.js或缩小版本.

As far as I know from your problem that you haven't refer to the required javascript i.e. util.js, bootstrap.js, popper.js or minified version.

在这里,我没有做太多事情,只是在索引文件中引用了所需的javascript文件

Here, I have done nothing much, just refer the required javascript files in the index file

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

然后我创建了一个导航组件并按要求进行设计,如下所示:

And I created a nav component and design as required like this:

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div 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 class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div

可以在此处.希望对您有帮助.

The working demo can be found here. Hope this helps you.

这篇关于Angular 6的Bootstrap下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆