Bootstrap 5下拉菜单不适用于角度12

Question

我正在尝试在 Angular12 中添加 bootstrap5 下拉菜单，但它不起作用。
我已经安装了所有必要的包，将它们添加到 angular.json 文件中。
从 bootstrap5 文档中复制了确切的示例仍然没有工作。

在angular.json我已经给了

 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
 "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
   ]

以下是我的 html 代码（与 bootstrap 5 文档中的相同）

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data- 
bs-toggle="dropdown" aria-expanded="false">
Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

我使用命令 npm i 安装软件包，但没有提及任何版本名称，所以我猜是安装了最新版本。安装 jquery 作为最后的手段在某处读取 bootstrap 5 不需要 jquery。非常感谢任何帮助。

Answer 1

根据Bootstrap 5 (Separate section)，Bootstrap 5 需要@popperjs/core，但不需要 popperjs。因此，您安装和导入了错误的库。

仅供参考，Bootstrap 5 removed dependency on jQuery。

---

解决方案 1：安装 @popperjs/core

1. 通过 npm 安装 @popperjs/core

npm install @popperjs/core

1. 将@popperjs/core 导入到 angular.json 中。 必须先使用 Popper（如果您使用的是工具提示或弹出框），然后是我们的 JavaScript 插件。

angular.json

"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

---

解决方案 2：将 Bootstrap 作为包导入

Bootstrap bundle 包括用于我们的工具提示和弹出框的 Popper。因此您无需单独安装@popperjs/core。

angular.json

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

---

解决方案 3：角度引导

Angular Bootstrap Dropdown 是另一个使 Bootstrap 在 Angular 应用程序中工作的选项。

1. 安装Angular Bootstrap (NG Bootstrap)。

npm install @ng-bootstrap/ng-bootstrap

1. 将NgbModule 添加到app.module.ts 导入部分。

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [.., NgbModule]
})

1. 应用 Angular Bootstrap 下拉指令。

<div ngbDropdown class="dropdown">
  <button ngbDropdownToggle class="btn btn-secondary" type="button" id="dropdownMenuButton1" aria-expanded="false">
Dropdown button
</button>
  <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
    <li><a ngbDropdownItem href="#">Action</a></li>
    <li><a ngbDropdownItem href="#">Another action</a></li>
    <li><a ngbDropdownItem href="#">Something else here</a></li>
  </ul>
</div>

Sample Solution 3 on StackBlitz

Answer 2

将data-bs-toggle="dropdown" 添加到链接或按钮以切换下拉菜单

请参阅the bootstrap documentation 了解更多信息。