确保已在根文件夹中安装了jQuery

Question

我正在开发一个使用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>

我做错了什么？

编辑I：

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

角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时，我得到了这个输出：

我做错了什么？

Answer 1

您必须确保在Angular应用中包含并加载popper.js，因为在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

Answer 2

我不允许在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

Answer 3

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

示例： ../custom.module.ts

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

Answer 4

您可以安装ng-bootstrap（在https://ng-bootstrap.github.io中查找文档）来代替在脚本中添加popper，jquery依赖项。使用ng-bootstrap优于添加bootstrap，jquery和popper脚本的优势是因为它不会膨胀软件包的大小，并且由于这些原因，Angular社区创建了ng-bootstrap。安装步骤：

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

Answer 5

确保已在根文件夹中安装了jQuery

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

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

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

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

Answer 6

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

ngbDropdown ngbDropdownToggle ngbDropdownMenu 和 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>

Answer 7

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

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

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

Answer 8

有效的是

将此添加到我的 angular.json

<responseMessage>
   <response>
      <ertResponse>
         <verificationStatus>F</verificationStatus>
         <errorCode>22601</errorCode>
         <errorText>Badge Number 222 not found</errorText>
      </ertResponse>
   </response>
</responseMessage>

将此添加到 index.html 的标题标记

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

Answer 9

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

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

导航栏下拉菜单不适用于Angular和Bootstrap 4

9 个答案:

确保已在根文件夹中安装了jQuery