导航栏下拉菜单不适用于 Angular 和 Bootstrap 4 [英] Navbar drop-down menu not working with Angular and Bootstrap 4

问题描述

我正在使用 Angular 5 和 Bootstrap 4 开发 Web 应用程序，但在导航菜单栏下拉菜单中遇到问题.我正在关注文档

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

源映射错误:请求失败，状态为 404资源网址:http://localhost:4200/scripts.bundle.js源地图网址:bootstrap.min.js.map

当我安装 jquery 时，我得到了这个输出:

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

我做错了什么?

解决方案

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

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

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

I'm developing a web application with Angular 5 and Bootstrap 4 and I'm having problems with the nav menu bar dropdowns. I'm following the documentation https://getbootstrap.com/docs/4.0/components/navs/ but I don't know why drop-down menu doesn't work!

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

What am I doing wrong?

Edit I:

I have added jquery and popper through npm, update muy angular-cli.json and restart the server:

angular-cli.json:

And when I load the page I've got this error:

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

When I have installed jquery I've got this output:

And when I hace installed popper I've got this output:

What am I doing wrong?

解决方案

You have to make sure that popper.js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4.

Here's what the relevant part of your angular-cli.json should look like:

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

To install popper.js use this command:

npm install popper.js --save

Reference: https://www.npmjs.com/package/popper.js

这篇关于导航栏下拉菜单不适用于 Angular 和 Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！