Bootstrap 导航栏下拉菜单不起作用。注销用户

Question

我无法使下拉菜单正常工作。每当我单击“个人资料”链接以下拉并查看“帐户”和“注销”选项时，它都会让我退出我的 Angular 应用程序。

    <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>

更新 我知道可能缺少包含 .js 或 .css 的顺序，因此粘贴了我的 angular.json 和 style.css 的内容。

styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';  
@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

angular.json

            "styles": [
              "src/styles.css", 
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "src/custom.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
         
            ]

Answer 1

上面截取的代码是纯 HTML 和 Bootstrap。我已按照您提供的方式运行它，并且按预期运行。下拉菜单适用于 desktop 和 mobile 视图。您可能需要调整移动汉堡图标的颜色，因为它是不可见的，但在其他方面是有用的。我已经提供了一些截图供您参考。 我最好的猜测是，您面临的问题与您的 Angular 设置有关，而不是 Bootstrap 和 HTML。