【问题标题】：Navbar drop-down menu not working with Angular and Bootstrap 4导航栏下拉菜单不适用于 Angular 和 Bootstrap 4
【发布时间】：2018-08-09 21:03:05
【问题描述】：

我正在使用 Angular 5 和 Bootstrap 4 开发一个 Web 应用程序，但我遇到了导航菜单栏下拉菜单的问题。我正在关注文档https://getbootstrap.com/docs/4.0/components/navs/，但我不知道为什么下拉菜单不起作用！

<header>
    <div class = "row align-items-end nopadding">
        <div class = "col-md-3" style = "background-color: blanchedalmond"><app-logo></app-logo></div>
        <div class = "col-md-6">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Ligas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Gráficas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Artículos</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>      
                    <div class=" dropdown dropdown-menu">
                        <a class="dropdown-item menu-item" href="#">Equipos</a>
                        <a class="dropdown-item menu-item" href="#">Jugadoras</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>                
            </ul>
        </div>
        <div class = "col-md-3 right-content">
            Right column
        </div>
    </div>
</header>

我做错了什么？

编辑我：

我已经通过 npm 添加 jquery 和 popper，更新 muy angular-cli.json 并重启服务器：

angular-cli.json：

当我加载页面时出现此错误：

Error in the source mapping: request failed with status 404 
Resource URL: http://localhost:4200/ scripts.bundle.js 
Sourcemap URL: bootstrap.min.js.map

安装 jquery 后，我得到了以下输出：

当我安装 popper 时，我得到了这个输出：

我做错了什么？

【问题讨论】：

它对我有用。您是否能够在 JSfiddle 等中重现该问题？
如果您不使用 Angular 5，它可以工作，而 Angular 5 则无法工作。例如，您是否在标头组件中使用 Angular 5 测试过代码？

标签： html css angular bootstrap-4

【解决方案1】：

首先使用命令行安装： npm install --save @ng-bootstrap/ng-bootstrap

添加这个： “./node_modules/bootstrap/dist/css/bootstrap.min.css” 在 styles 数组

内的 angular.json 文件中

最后，在 app.module.ts 文件中导入下拉模块 从 'ngx-bootstrap/dropdown' 导入 { BsDropdownModule }; 然后在“import”部分添加模块：BsDropdownModule.forRoot()

【讨论】：

【解决方案2】：

我遇到了同样的问题，我的解决方法是更改数据切换，在你的情况下，从：

<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>

收件人：

<a class="nav-link menu-item dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>

【讨论】：

【解决方案3】：

有用的是

将此添加到我的 angular.json

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

将此添加到 index.html 的标头标记中

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

【讨论】：

【解决方案4】：

截至 2021 年 5 月 21 日，bootstrap 5.0.1 版本已经推出，这似乎是我遇到的问题。我切换回 4.6.0，一切又好了。

注意：如果您在 angular.json 中引用以下脚本和样式，则应该没问题。 bootstrap.bundle.min.js 已经绑定了 popper.js。

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
 ],
 "scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
 ]

【讨论】：

【解决方案5】：

我遇到了同样的问题并通过以下方式解决了它：

npm install bootstrap --save
在 styles.css 中添加了以下行

@import "~bootstrap/dist/css/bootstrap.min.css";

在 index.html 中添加了以下行

<!doctype html>
<html lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<head>
  <meta charset="utf-8">

......................

【讨论】：

【解决方案6】：

就我而言，问题是我没有使用角度特定的属性。见：https://ng-bootstrap.github.io/#/components/dropdown/examples

ngbDropdownngbDropdownTogglengbDropdownMenu和ngbDropdownItem

我必须改变

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

到：

<li class="nav-item dropdown" ngbDropdown>
            <a class="nav-link dropdown-toggle" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" ngbDropdownToggle>
              Link
            </a>
            <ul class="dropdown-menu"  ngbDropdownMenu aria-labelledby="navbarScrollingDropdown">
              <li ngbDropdownItem><a class="dropdown-item" href="#">Action</a></li>
              <li ngbDropdownItem><a class="dropdown-item" href="#">Another action</a></li>
              <li ngbDropdownItem><hr class="dropdown-divider"></li>
              <li ngbDropdownItem><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>

【讨论】：

这看起来是最 Angular 的方式。
为我工作，谢谢

【解决方案7】：

我遇到了同样的问题，但我设法找到了解决方案，如果您的项目有引导程序，那么简单的解决方案就是改变

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>

到

<a class="dropdown-toggle" data-toggle="dropdown" href='target="_self"'>Page 1
        <span class="caret"></span></a>

简而言之，将href="#" 更改为href='target="_self"'

【讨论】：

【解决方案8】：

确保您已在根文件夹中安装 jquery

如果没有，则使用 NPM 安装 ---> npm install jquery --save

注意：如果您想在您的应用程序中使用引导程序，或者如果您已经在您的项目中使用，请确保在包含引导程序 JavaScript 文件之前包含 jQuery。 Bootstrap 的 JavaScript 文件需要 jQuery

转到 Angular CLI 项目文件夹根目录下的 angular.json 文件，找到 scripts: [ ] 属性，并包含 jQuery 的路径，如下所示：

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

【讨论】：

【解决方案9】：

我不允许对 WebDevBooster 的答案添加评论，所以我发布了一条新评论。 angular.json (angular-cli.json) 中的下一个声明就足够了：

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

propper.js 已经包含在 bootstrap.bundle.min.js 中：https://getbootstrap.com/docs/4.4/components/dropdowns/#overview

【讨论】：

bootstrap.bundle.min.js 是一个棘手的问题。我没有意识到这一点。谢谢。
这似乎目前不起作用。任何想法为什么？

【解决方案10】：

不要在脚本中添加 popper、jquery 依赖项，而是尝试安装 ng-bootstrap（在 https://ng-bootstrap.github.io 中查找文档）。使用 ng-bootstrap 相对于添加 bootstrap、jquery 和 popper 脚本的优势它不会膨胀你的包大小吗？出于这些原因，Angular 社区创建了 ng-bootstrap。安装步骤：

npm install --save @ng-bootstrap/ng-bootstrap
安装后，您需要导入我们的主模块。

【讨论】：

如果您已经在使用像primeng这样的不同组件库但又想使用引导导航库，这将是一个问题。
在我从我的 Angular 项目中删除带有 npm 的引导程序，然后通过 ng-bootstrap 重新安装之前，我确实在使这个下拉菜单工作时遇到了很多麻烦。该组件的模板标记需要进行少量编辑才能将一些引导类转换为 ng 指令，然后它就可以完美地工作了。

【解决方案11】：

除了app.module.ts，您还需要在您放置导航条码的模块中导入模块MDBBootstrapModule.forRoot()。

示例： ../custom.module.ts

import { MDBBootstrapModule } from 'angular-bootstrap-md';
...
@NgModule({
  imports: [
    CommonModule,
    MDBBootstrapModule.forRoot()
  ],
...

【讨论】：

【解决方案12】：

您必须确保 popper.js 包含并加载到您的 Angular 应用程序中，因为这是 Bootstrap 4 中弹出或下拉的所有内容所必需的。

angular-cli.json 的相关部分如下所示：

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.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"
],

要安装 popper.js，请使用以下命令：

npm install popper.js --save

参考：https://www.npmjs.com/package/popper.js

【讨论】：

这通常应该在 bootstrap.min.js 之前立即加载查看这个问题中的 angular-cli.json：stackoverflow.com/q/48362985/8270343
npm install popper.js --save 是您所需要的：npmjs.com/package/popper.js
有效！！！我觉得我要哭了！！！ :) 非常感谢您的帮助！！！
注意：确保jQuery的引用在bootstrap.js之前。
就我而言， Dropdown 将 data-toggle 更改为 data-bs-toggle 开始正常工作。希望对您有所帮助。