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

问题描述

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

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>

我在做什么错了?

编辑我:

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

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

当我安装了jquery时，我得到了以下输出:

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

当我安装了popper时，我得到了以下输出:

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

我在做什么错了?

推荐答案

您必须确保在Angular应用中包含并加载了popper.js，因为在Bootstrap 4中弹出或下拉的所有内容都需要使用popper.js

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.

这是angular-cli.json中相关部分的样子:

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

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

To install popper.js use this command:

npm install popper.js --save

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

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