带有 routerLink 的 Navbar 中的 NgbDropdown 不会重定向

Question

我一直在尝试创建一个导航栏，其中主要 link（下拉菜单 header）将我带到一个页面，然后使用带有列表的 dropdown-split可以重定向到其他 business-related link 的锚。问题是下拉菜单 children 没有重定向到任何地方。如果我将 link 放在导航栏的另一个项目上，它工作正常。

笨蛋： http://plnkr.co/s2yGUvWhY0pU3j4qh0lt

<nav class="navbar navbar-expand-md">
  <ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active" routerLink="link1">
  <div class="btn-group">
    <button class="nav-link">Link 1</button>
    <div ngbDropdown placement="bottom-left" class="btn-group">
      <button class="btn dropdown-toggle-split nav-link" ngbDropdownToggle></button>
      <div ngbDropdownMenu class="dropdown-menu">
        <a class="nav-link dropdown-item" routerLink="link2">Link 2</a>
      </div>
    </div>
  </div>
</li>
  </ul>
</nav>
<router-outlet></router-outlet>

Angular: 5.2.5

ng-bootstrap: 1.0.0

Bootstrap: 4.0.0

Answer 1

我把link1路由器link移到了按钮里面。它覆盖了 li 级别的所有内容。

<nav class="navbar navbar-expand-md">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item" routerLinkActive="active" >
      <div class="btn-group">
        <button class="nav-link"><a class="nav-link dropdown-item" routerLink="/link1">Link 1</a></button>
        <div ngbDropdown placement="bottom-left" class="btn-group">
          <button class="btn dropdown-toggle-split nav-link" ngbDropdownToggle></button>
          <div ngbDropdownMenu class="dropdown-menu">
            <a class="nav-link dropdown-item" routerLink="/link2">Link 2</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>
<router-outlet></router-outlet>

带有 routerLink 的 Navbar 中的 NgbDropdown 不会重定向

NgbDropdown in Navbar w/ routerLink does not redirect

bootstrap-4

ng-bootstrap

angular5