html - 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 的内容。

样式.css

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

角.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"
         
            ]

标签： htmljquerycssangularbootstrap-4

Answer 1

The code snipped above is in pure HTML and Bootstrap. I have run it as you have provided, and it runs as expected. The dropdown works in both desktop and mobile view. You may want to tweak the coloring of the mobile burger icon, as its invisible, but otherwise functional. I have included some screenshots for your reference. My best guess is that the issue you're facing has to do with your Angular setup rather than Bootstrap and HTML.