angular - 使用 Angular 6 的 Bootstrap 下拉菜单

Question

我正在尝试使用 Angular 6 在 Bootstrap 导航栏中创建一个下拉项。当我在线测试时，我的代码正在运行:

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

但是下拉列表不适用于 Angular 6。我使用了以下方法来将 Bootstrap 与 Angular 一起使用:

ng add @ng-bootstrap/schematics

除了那个下拉项，一切正常!

Answer 1

我之前遇到过同样的问题，我发现如下:

1. html 应该与 bootstrap 中的类 container 绑定(bind)，如 Bootstrap Layout 中所述
2. 下拉菜单建立在第三方库 Popper.js 上，如 Bootstrap Dropdown 中所述。

据我所知，你没有引用所需的 javascript 即 util.js、bootstrap.js、popper.js 或缩小版本.

这里我什么都没做，就是在索引文件中引用需要的javascript文件

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

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

<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

可以找到工作演示here .希望对您有所帮助。