ng-Bootstrap中ngbDropdownToggle不显示激活状态及navbar标签激活异常问题

首先明确：用<nav>元素作为ng-bootstrap Navbar的载体是完全正确的，这符合Bootstrap和ng-bootstrap的组件规范，无需担心使用方式错误。

针对你遇到的「非下拉链接在点击下拉选项后仍保持激活状态」的问题，核心原因是路由匹配规则的配置问题，以下是具体解决方案：

1. 给根路由/首页路由添加精确匹配规则 #

默认情况下routerLinkActive是部分匹配，比如如果Home对应的路由是/，那么所有以/开头的路由（比如/dropdown/xxx）都会触发Home的激活状态。解决方法是给Home的routerLinkActive添加精确匹配配置：

<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  <a class="nav-link" routerLink="/">Home</a>
</li>

2. 下拉触发器不要绑定路由 #

如果你的下拉按钮本身不是一个可跳转的路由链接，不要给它添加routerLink或routerLinkActive，只给下拉菜单内的选项绑定路由和激活状态：

<li class="nav-item dropdown">
  <!-- 下拉触发器仅作为展开按钮，不绑定路由 -->
  <a class="nav-link dropdown-toggle" id="dropdownMenuButton" role="button" 
     ngbDropdownToggle aria-expanded="false">
    下拉菜单
  </a>
  <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
    <!-- 下拉选项单独绑定路由和激活状态 -->
    <a class="dropdown-item" routerLink="/dropdown/item1" routerLinkActive="active">
      选项1
    </a>
    <a class="dropdown-item" routerLink="/dropdown/item2" routerLinkActive="active">
      选项2
    </a>
  </div>
</li>

3. 检查自定义CSS干扰 #

如果以上配置后仍有问题，检查是否有自定义CSS覆盖了active类的样式，确保Bootstrap的.active类优先级足够（比如不要用更高优先级的选择器修改导航链接的激活样式）。

完整的正确示例结构：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/">我的站点</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a class="nav-link" routerLink="/">首页</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about">关于我们</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" 
           ngbDropdownToggle aria-expanded="false">
          更多菜单
        </a>
        <div ngbDropdownMenu aria-labelledby="navbarDropdown">
          <a class="dropdown-item" routerLink="/docs" routerLinkActive="active">文档</a>
          <a class="dropdown-item" routerLink="/contact" routerLinkActive="active">联系我们</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者sahar manouchehri