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

Posted 2023-03-06

【中文标题】Bootstrap Dropdowns 按钮不适用于 Angular 8 组件

【英文标题】：Bootstrap Dropdowns button not working with Angular 8 component

【发布时间】：2019-12-07 15:23:02

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

欢迎来到 SO。请您分享您到目前为止尝试过的代码。

您可以edit您的问题，请不要在cmets中发布代码

【参考方案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>

【讨论】：

我们必须按照上面给出的确切顺序。除非它不起作用。谢谢。

【参考方案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