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

107

何塞·卡洛斯

我正在使用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时，我得到了以下输出：

我究竟做错了什么？

Web开发助推器

您必须确保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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。