Bootstrap 4（角度）导航栏折叠按钮不起作用

Question

我正在使用此代码示例在Angular项目中使用Bootstrap 4实现可折叠的导航栏。

Bootstrap是使用npm以及Popper和jQuery安装的。版本：

angular/core: 8.2.5

angular/cli: 8.3.3

bootstrap: 4.3.1

popper: 1.0.1

popper.js: 1.15.0

jquery: 3.4.1

如以下屏幕截图所示，减小窗口大小会使导航栏折叠，并显示“汉堡包”按钮。但是，“汉堡包”按钮不起作用。控制台中未记录任何错误。

这是我的导航代码：

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">chumiest bucket</a>
  <button class="navbar-toggler" 
    type="button" 
    data-toggle="collapse" 
    data-target="#collapsingNavbar" 
    aria-expanded="false" 
    aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsingNavbar">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
      </ul>
  </div>
</nav>

我遇到的所有答案都源于没有正确的CDN链接（我没有使用）；我要使用的方法可能不正确。

Answer 1

有效的方法

将Popper，Bootstrap和jQuery JavaScript文件添加到angular.json“脚本”列表中，如下所示：

...
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/popper.js/dist/umd/popper.js",
  "./node_modules/bootstrap/dist/js/bootstrap.js"
]