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

Bootstrap 依赖项是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 中使用它们；因此，我们使用一个专门用于将 Bootstrap 与 Angular 结合使用的库，并在那里查找下拉功能

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

完整的工作堆栈闪电战在这里