Bootstrap 5 下拉菜单不适用于 angular 12 [英] Bootstrap 5 dropdown not working on angular 12
问题描述
我正在尝试在 Angular12 中添加 bootstrap5 下拉菜单,但它不起作用.
我已经安装了所有必需的包,并将它们添加到 angular.json
文件中.
从 bootstrap5 文档中复制了确切的示例仍然不起作用.
在 angular.json
中我给出了
样式":[node_modules/bootstrap/dist/css/bootstrap.min.css"],脚本":[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 文档中的相同)
<button class="btn btn-secondary dropdown-toggle";类型=按钮"id="dropdownMenuButton1";数据-bs-toggle =下拉"aria-expanded="false">下拉按钮按钮><ul class="下拉菜单";aria-labelledby="dropdownMenuButton1"><li><a class="dropdown-item";href=#">动作</a></li><li><a class="dropdown-item";href=#">另一个动作</a></li><li><a class="dropdown-item";href=#">这里还有别的东西</a></li>
我使用命令 npm i 来安装软件包,但没有提及任何版本名称,所以我猜已经安装了最新版本.安装 jquery 作为最后的手段在某处读取引导程序 5 不需要 jquery.非常感谢任何帮助.
根据 Bootstrap 5(单独部分),Bootstrap 5 需要@popperjs/core 但不需要 popperjs.因此,您安装并导入了错误的库.
仅供参考,Bootstrap 5 移除了对 jQuery 的依赖.
方案一:安装@popperjs/core
- 通过 npm 安装
@popperjs/core
npm install @popperjs/core
- 将
@popperjs/core
导入 angular.json.Popper 必须首先出现(如果您使用的是工具提示或弹出框),然后是我们的 JavaScript 插件.
<块引用>
angular.json
脚本":[./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
脚本":[./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]
解决方案 3:Angular Bootstrap
Angular Bootstrap Dropdown 是另一种使 Bootstrap 工作的选项Angular 应用.
npm install @ng-bootstrap/ng-bootstrap
- 将
NgbModule
添加到 app.module.ts 导入部分.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';@NgModule({进口:[.., NgbModule]})
- 应用 Angular Bootstrap Dropdown 指令.
<button ngbDropdownToggle class="btn btn-secondary";类型=按钮"id="dropdownMenuButton1";aria-expanded="false">下拉按钮按钮><ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1"><li><a ngbDropdownItem href=#">动作</a></li><li><a ngbDropdownItem href=#">另一个动作</a></li><li><a ngbDropdownItem href=#">这里还有别的东西</a></li>
I'm trying to add bootstrap5 drop down in Angular12 it's not working.
I have installed all the necessary packages, added them in the angular.json
file.
Copied the exact example from bootstrap5 docs still not working.
In angular.json
i have given
"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"
]
Below is my html code (same as in bootstrap 5 docs)
<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>
I used the command npm i to install the packages without mentioning any version name so I guess the latest version was installed. Installed jquery as the last resort read somewhere bootstrap 5 don`t require jquery. Any help is greatly appreciated.
According to Bootstrap 5 (Separate section), Bootstrap 5 requires @popperjs/core but not popperjs. Hence you were installing and importing wrong library.
FYI, Bootstrap 5 removed dependency on jQuery.
Solution 1: Install @popperjs/core
- Install
@popperjs/core
via npm
npm install @popperjs/core
- Import
@popperjs/core
into angular.json. Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.
angular.json
"scripts": [
"./node_modules/@popperjs/core/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Solution 2: Import Bootstrap as bundle
Bootstrap bundle include Popper for our tooltips and popovers. Hence you no need to install @popperjs/core
separately.
angular.json
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Solution 3: Angular Bootstrap
Angular Bootstrap Dropdown is another option which makes Bootstrap works in Angular App.
- Install Angular Bootstrap (NG Bootstrap).
npm install @ng-bootstrap/ng-bootstrap
- Add
NgbModule
into app.module.ts imports section.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [.., NgbModule]
})
- Apply Angular Bootstrap Dropdown directive.
<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
这篇关于Bootstrap 5 下拉菜单不适用于 angular 12的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!