[英]Bootstrap 4 dropdown not working with Angular 12
I have a sample Angular 12 project with Bootstrap 4. Everything is working in my project except the dropdown.我有一个带有 Bootstrap 4 的示例 Angular 12 项目。除下拉列表外,我的项目中的所有内容都在工作。
This SO answer was not working for me.这个 SO 答案对我不起作用。
I have installed jQuery, Popper and Bootstrap in my project using the NPM commands given:我已经使用给出的 NPM 命令在我的项目中安装了 jQuery、Popper 和 Bootstrap:
npm install --save @popperjs/core
npm install --save bootstrap
npm install --save jquery
I also referred them from the angular.json:我还从 angular.json 中提到了它们:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
I'm getting no error and also dropdown button is coming.我没有收到任何错误,而且下拉按钮也来了。 But the issue is that the list is not popping up as soon as I clicked.但问题是,当我单击时,列表并没有弹出。
The sample code is given below that I took from Bootstrap Dropdown Official Docs for testing.下面给出了我从Bootstrap Dropdown Official Docs获取的示例代码进行测试。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Am I missing something which need to be added?我错过了一些需要添加的东西吗?
it worked for me它对我有用
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Edit: omg.编辑:天哪。 this issue was very tiring for me.这个问题对我来说很累。 i worked on it for a few hours.我工作了几个小时。 and the problem was solved in an unnoticed way and i don't understand the cause.并且问题以一种被忽视的方式解决了,我不明白原因。 i had to read bootstrap.js for this lol.我不得不为这个大声笑阅读 bootstrap.js。 just change the expression data-toggle="dropdown"
to data-bs-toggle="dropdown"
in the html file.只需将 html 文件中的表达式data-toggle="dropdown"
更改为data-bs-toggle="dropdown"
即可。
so:所以:
in html在 html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Note: The angular.json
example i shared above is still running.注意:我上面分享的angular.json
示例仍在运行。
Yep solution worked for me thanks!是的,解决方案对我有用,谢谢!
However I didn't update angular.json as per above, instead added the bootstrap dropdown module in app.module.ts ie:但是我没有按照上面的方法更新 angular.json,而是在 app.module.ts 中添加了引导下拉模块,即:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@NgModule({
declarations: [
.....
],
imports: [
...
,BsDropdownModule.forRoot()
...
]
,bootstrap: [AppComponent]
})
export class AppModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.