Bootstrap Dropdowns 按钮不适用于 Angular 8 组件

Question

我正在尝试使用 bootstrap4.3 类显示下拉菜单，但在菜单上选择后，我将使用 angular 8 版本。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

Answer 1

引导程序依赖项是popper.js 和jquery。在 Angular 应用程序中安装 bootstrap 后，它会显示依赖项，然后安装它们并将它们添加到脚本中的 angular.json 中（见下图）。兼容的版本有 Bootstrap@4.3.1（该版本修复了下拉问题）和 popper.js@1.14.7

下拉菜单的依赖是 bootstrap 中的 popper.js

因此，按照上述顺序，现在下拉菜单将起作用。即使使用最新版本（4.5.x）的引导程序也可以。如果您不喜欢，您不必为此使用另一个第三方库/包管理器。谢谢。请参阅下面的相关标记，取自 bootstrap。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

Answer 2

Bootstrap 中的下拉功能需要 bootstrap.js 和 jquery.js；但是我们不应该在 Angular 中使用这些；所以我们使用一个专门用于使用 Angular 的 Bootstrap 的库并查找 dropdown functionality there

相关HTML：

    <div ngbDropdown class="d-inline-block">
        <button class="btn btn-outline-primary" id="dropdownMenuButton" ngbDropdownToggle>Dropdown button</button>
        <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
          <button ngbDropdownItem>Action</button>
          <button ngbDropdownItem>Another Action</button>
          <button ngbDropdownItem>Something else here</button>
        </div>
      </div>

完成working stackblitz here