html - 导航栏下拉菜单不适用于 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>

我做错了什么？

编辑一:

我已经通过 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 时，我得到了这个输出:

我做错了什么？

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