导航栏中带routerLink的NgbDropdown无法跳转

嘿，我碰到过类似的情况，在Angular 5搭配ng-bootstrap 1.x的时候，下拉分割面板里的链接经常会出现不跳转的问题，大概率是组件的事件处理和路由/锚点跳转冲突了，给你几个可行的解决思路：

1. 调整下拉子项的HTML结构 #

首先确保你的下拉菜单里的<a>标签正确绑定了路由或者直接的href，并且ngbDropdownItem指令的使用方式没问题。正确的结构应该是这样的：

<!-- 主下拉标题（可跳转） -->
<div ngbDropdown class="dropdown">
  <a class="nav-link dropdown-toggle" href="/your-main-page" id="splitDropdown" ngbDropdownToggle>
    主链接标题
  </a>
  <div ngbDropdownMenu aria-labelledby="splitDropdown">
    <!-- 业务链接项 -->
    <a ngbDropdownItem routerLink="/business/link-one">业务链接1</a>
    <a ngbDropdownItem routerLink="/business/link-two">业务链接2</a>
    <!-- 分割线 -->
    <div class="dropdown-divider"></div>
    <a ngbDropdownItem routerLink="/business/link-three">业务链接3</a>
  </div>
</div>

这里要注意，ngbDropdownItem要直接加在<a>标签上，不要嵌套多余的元素，避免事件传递出问题。

2. 手动阻止事件冒泡 #

有时候ng-bootstrap的下拉组件会捕获点击事件来关闭菜单，这会干扰Angular路由的跳转逻辑。你可以给每个子项的<a>标签加上点击事件阻止冒泡：

<a ngbDropdownItem routerLink="/business/link-one" (click)="$event.stopPropagation()">业务链接1</a>

这样就能确保点击事件优先触发路由跳转，而不是被下拉组件的关闭逻辑拦截。

3. 检查路由配置 #

如果上面的方法都没用，先确认你的Angular路由模块里有没有正确配置这些业务链接的路径，比如：

// app-routing.module.ts
const routes: Routes = [
  // 其他路由配置
  { path: 'business/link-one', component: BusinessLinkOneComponent },
  { path: 'business/link-two', component: BusinessLinkTwoComponent },
];

别小看拼写错误，很多时候跳转失败都是因为路径写错了。

4. 考虑升级ng-bootstrap版本 #

你用的ng-bootstrap 1.0.0是比较早期的版本，针对Angular 5的兼容版本里，1.1.2是更稳定的选择，里面修复了不少事件处理的bug。如果项目允许的话，可以尝试升级到这个版本，大概率能解决这类问题。

按照上面的步骤试一下，应该就能让下拉子项正常跳转了～

内容的提问来源于stack exchange，提问作者Manuel Santiago Yépez