引导导航栏下拉菜单不工作。 注销用户

Question

我无法使下拉菜单工作。 每当我点击配置文件链接下拉并查看帐户和注销选项时，它就会将我从angular应用程序中注销。

null

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top">
  <a class="navbar-brand text-white" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link text-white" routerLink="/dashboard">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" routerLink="/dashboard">Documents</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Profile
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" routerLink="/account">Account</a>
          <a class="dropdown-item" routerLink="/account" (click)="authService.SignOut()">Log Out</a>
        </ul>
      </li>
    </ul>
  </div>
</nav>

null

Answer 1

上面截取的代码是纯HTML和bootstrap格式的。 我已经按照您提供的那样运行了它，并且它按照预期运行。 下拉菜单在桌面和移动视图中都可以使用。 你可能想要调整移动汉堡图标的颜色，因为它是看不见的，但其他功能。 我收录了一些截图供大家参考。 我的最佳猜测是，您面临的问题与您的角度设置有关，而不是引导程序和HTML。