[英]Bootstrap 4 dropdown not working with Angular 12
我有一個帶有 Bootstrap 4 的示例 Angular 12 項目。除下拉列表外,我的項目中的所有內容都在工作。
這個 SO 答案對我不起作用。
我已經使用給出的 NPM 命令在我的項目中安裝了 jQuery、Popper 和 Bootstrap:
npm install --save @popperjs/core
npm install --save bootstrap
npm install --save jquery
我還從 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"
]
我沒有收到任何錯誤,而且下拉按鈕也來了。 但問題是,當我單擊時,列表並沒有彈出。
下面給出了我從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>
我錯過了一些需要添加的東西嗎?
它對我有用
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
編輯:天哪。 這個問題對我來說很累。 我工作了幾個小時。 並且問題以一種被忽視的方式解決了,我不明白原因。 我不得不為這個大聲笑閱讀 bootstrap.js。 只需將 html 文件中的表達式data-toggle="dropdown"
更改為data-bs-toggle="dropdown"
即可。
所以:
在 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>
注意:我上面分享的angular.json
示例仍在運行。
是的,解決方案對我有用,謝謝!
但是我沒有按照上面的方法更新 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.