javascript - 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 (Separate section) , Bootstrap 5 需要@popperjs/core 但是 不是 popperjs .因此，您安装和导入了错误的库。
仅供引用， Bootstrap 5 removed dependency on jQuery .

解决方案1:安装@popperjs/core
先决条件 :您已经安装了 Bootstrap 5

npm install bootstrap@5

您需要安装 @popperjs/core作为依赖。通过 npm

npm install @popperjs/core

进口 @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 5

npm install bootstrap@5

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

将 Bootstrap 包导入 angular.json scripts大批。

angular.json

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

解决方案 3: Angular 引导
Angular Bootstrap Dropdown是另一个让 Bootstrap 在 Angular App 中工作的选项。

安装 Angular Bootstrap (NG Bootstrap) .

npm install @ng-bootstrap/ng-bootstrap

添加 NgbModule进入 app.module.ts 导入部分 .

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

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

应用 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