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

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

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

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