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

【问题标题】：Bootstrap 4 dropdown not working with Angular 12Bootstrap 4 下拉菜单不适用于 Angular 12
【发布时间】：2021-08-16 19:34:43
【问题描述】：

我有一个带有 Bootstrap 4 的示例 Angular 12 项目。除了下拉菜单外，我的项目中的一切都正常。

这个 SO answer 不适合我。

我已经使用给定的 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>

我是否缺少需要添加的内容？

【问题讨论】：

当我运行npm install --save bootstrap 时，它会安装Bootstrap 5，因此上面提供的下拉按钮的示例代码将不起作用。试试下面的代码dropdown button
stackblitz.com/edit/… 这是您的工作示例@AnishB。

标签： javascript angular bootstrap-4

【解决方案1】：

对我有用

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

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

【讨论】：

让我试试这个。
似乎没有错。刷新脚本序列后，您是否使用“ng serve”重新启动了应用程序？
是的！重新启动了一切。仍然没有成功。你试过 Angular 12 吗？
我正在使用 Angular 11。我将打开一个新项目并尝试一下
我更新了评论，是的，它解决了问题

【解决方案2】：

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

但是我没有像上面那样更新 angular.json，而是在 app.module.ts 中添加了引导下拉模块，即：

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  declarations: [
    .....
  ],
  imports: [
    ...
    ,BsDropdownModule.forRoot()
    ...
  ]
  ,bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：