时间戳

首页 > 解决方案 > Navbar-Toogle Bootstrap 5 不工作（使用 Angular）

javascript - Navbar-Toogle Bootstrap 5 不工作（使用 Angular）

问题描述

我的控制台向我显示了这个错误，它是关于 popper js 的。这是错误，我认为因为我的切换按钮不起作用

scripts.js:7 Uncaught SyntaxError: Unexpected token 'export'

导出默认波普尔；

这是我的 html 文件和脚本

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" routerLink="home">Home</a>
        </li>
        <li class="nav-item active" *ngIf="!isUser">
            <a class="nav-link" routerLink="login">Login</a>
          </li>
          <li class="nav-item active" *ngIf="!isUser">
            <a class="nav-link" routerLink="register">Register</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="nav-link" routerLink="profil">Profil</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="nav-link" routerLink="products">Products</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="nav-link" routerLink="myproducts">My Products</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="btn btn-danger" (click)="logout()">Logout</a>
          </li>
      </ul>

    </div>
  </nav>

</div>


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

 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

标签： javascriptangularfrontendbootstrap-5popper.js

解决方案

您应该使用该umd脚本的版本，因为它与浏览器兼容。在脚本中，数组尝试替换：

"node_modules/popper.js/dist/popper.min.js"

和：

"node_modules/popper.js/dist/umd/popper.min.js"

推荐阅读