Angular中Bootstrap导航栏下拉菜单失效且点击即登出问题

嘿，我帮你梳理下问题所在，咱们一步步解决：

1. 先清掉重复引入的CSS/JS（这是最核心的问题！） #

你现在在styles.css和angular.json里重复加载了Bootstrap、Font Awesome的样式，脚本里也重复塞了jQuery、Popper.js和Bootstrap的JS文件——重复加载会直接搞乱Bootstrap的组件逻辑，下拉菜单肯定没法正常工作。

改styles.css： #

只留必要的引入，删掉重复的：

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

改angular.json： #

同样删掉重复项，只保留一份（用minified版本加载更快）：

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

提醒下：styles.css已经引入了Bootstrap和Font Awesome，所以angular.json里就别再加了，避免两次加载导致冲突。

2. 修正下拉菜单的HTML结构 #

Bootstrap的下拉菜单要求dropdown-menu里的选项必须用<li>包起来，你现在直接在<ul>里放<a>，不符合官方规范，很容易触发异常交互：

把导航栏的下拉部分改成这样：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Profile
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" routerLink="/account">Account</a></li>
    <li><a class="dropdown-item" routerLink="/account" (click)="authService.SignOut()">Log Out</a></li>
  </ul>
</li>

3. 给登出按钮加个事件阻止（保险操作） #

有时候Angular的事件绑定和Bootstrap的原生JS会打架，你可以给登出的点击事件加个$event.stopPropagation()，防止触发父元素的下拉折叠事件：

<li><a class="dropdown-item" routerLink="/account" (click)="authService.SignOut(); $event.stopPropagation()">Log Out</a></li>

4. 确认依赖都装对了 #

最后检查下必要的依赖有没有安装：

npm install bootstrap jquery popper.js --save

做完这些后，重启你的Angular应用（ng serve），应该就能正常展开下拉菜单了——点Profile只会展开菜单，只有点Logout才会触发登出~

内容的提问来源于stack exchange，提问作者a musical wish