切换按钮在引导程序4中不起作用，而角度7应用程序在导航栏中不起作用

Posted 2021-04-23

我正在使用Angular 7和Bootstrap 4.尝试在我的应用程序中添加导航栏，当导航栏折叠时，切换按钮不起作用。

我不想添加ng-bootstrap，只需要bootstrap4。

这是我的代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">{{title}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="contact">Contact Us</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

答案

我想你忘了在bootstrap.min.js中包含jquery.min.js，popper.min.js和angular.json文件链接，你已经放了bootstrap.min.css。

"styles": [
 "src/styles.css",
 "./node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js",
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/popperjs/dist/popper.min.js"
]