Bootstrap 5 下拉菜单在 Angular 12 上不起作用

Question

我正在尝试在 Angular 12 中添加 Bootstrap 5 下拉列表，但它不起作用。

我已经安装了所有必需的软件包，并将它们添加到angular.json文件中。

从 Bootstrap 5 文档复制了确切的示例，但仍然不起作用。

在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（单独部分），Bootstrap 5需要 @popperjs/core但不需要 popperjs。因此您安装并导入了错误的库。

\n

仅供参考，Bootstrap 5删除了对 jQuery 的依赖。

\n\n

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

\n

先决条件：您已经安装了 Bootstrap 5

\n

npm install bootstrap@5\n

\n

\n
1. 您需要@popperjs/core作为依赖项安装。通过 npm
\n

\n

npm install @popperjs/core\n

\n

\n
2. 导入@popperjs/core到angular.json。Popper（库）必须首先出现（如果您\xe2\x80\x99 使用工具提示或弹出窗口），然后是我们的 JavaScript 插件。
\n

\n

\n

角度.json

\n

\n

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

\n\n

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

\n

先决条件：您已经安装了 Bootstrap 5

\n

npm install bootstrap@5\n

\n

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

\n

\n
1. 将 Bootstrap 包导入到angular.json scripts数组中。
\n

\n

\n

角度.json

\n

\n

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

\n\n

解决方案 3：Angular Bootstrap

\n

Angular Bootstrap Dropdown是使 Bootstrap 在 Angular App 中工作的另一个选项。

\n

\n
1. 安装Angular Bootstrap (NG Bootstrap)。
\n

\n

npm install @ng-bootstrap/ng-bootstrap\n

\n

\n
2. 添加NgbModule到app.module.ts 导入部分。
\n

\n

npm install bootstrap@5\n

\n

\n
3. 应用 Angular Bootstrap Dropdown 指令。
\n

\n

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

\n

StackBlitz 上的示例解决方案 3

\n

Answer 2

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

请参阅引导文档以获取更多信息。