Bootstrap 4下拉菜单不适用于Angular 12

Question

我有一个带有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官方文档中获取的用于测试的示例代码。

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

我是否遗漏了需要添加的内容？

Answer 1

它对我有效

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

编辑：天哪。这个问题对我来说很累。我花了几个小时。问题以一种不被注意的方式得到了解决，我不明白原因。我不得不为这个lol阅读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示例仍在运行。

Answer 2

是的，解决方案对我有效，谢谢！

然而，我没有按照上面的内容更新angular.json，而是在app.module.ts中添加了引导下拉模块，即：

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@NgModule({
declarations: [
.....
],
imports: [
...
,BsDropdownModule.forRoot()
...
]
,bootstrap: [AppComponent]
})
export class AppModule { }