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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了切换按钮在引导程序4中不起作用,而角度7应用程序在导航栏中不起作用相关的知识,希望对你有一定的参考价值。

我正在使用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.jspopper.min.jsangular.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"
]

以上是关于切换按钮在引导程序4中不起作用,而角度7应用程序在导航栏中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

带有按钮组的引导下拉切换在导航栏中不起作用

在角度 bootstrap4.3 类中不起作用

dl(详细列表)在引导程序 4 中不起作用

为什么无线电样式按钮不能以反应形式切换自举角7不起作用

折叠在导航栏面包屑按钮的 ng-bootstrap 和 Angular 4 应用程序中不起作用

带有引导程序 3.3.4 的字形图标在 rails 4.2.1 中不起作用