Bootstrap 5 下拉菜單不適用於 angular 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 作為最后的手段在某處讀取引導程序 5 不需要 jquery。 任何幫助是極大的贊賞。

Answer 1

根據Bootstrap 5 (Separate section) ，Bootstrap 5需要 @popperjs/core但不需要 popperjs 。 因此，您正在安裝和導入錯誤的庫。

僅供參考，Bootstrap 5 刪除了對 jQuery 的依賴。

---

方案一：安裝@popperjs/core

1. 通過 npm 安裝@popperjs/core

npm install @popperjs/core

2. 將@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 包包括用於我們的工具提示和彈出框的 Popper。 因此您無需單獨安裝@popperjs/core 。

angular.json

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

---

解決方案 3：Angular Bootstrap

Angular Bootstrap Dropdown是另一個選項，它使 Bootstrap 在 Angular App 中工作。

1. 安裝Angular Bootstrap (NG Bootstrap) 。

npm install @ng-bootstrap/ng-bootstrap

2. 將NgbModule添加到app.module.ts 導入部分。

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

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

3. 應用 Angular Bootstrap Dropdown 指令。

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

StackBlitz 上的示例解決方案 3

Answer 2

將data-bs-toggle="dropdown"到鏈接或按鈕以切換下拉列表

有關更多信息，請參閱引導程序文檔。