Navbar中的NgbDropdown与routerLink不重定向

时间:2018-02-15 21:59:41

标签: bootstrap-4 angular5 ng-bootstrap

我一直在尝试创建一个导航栏,其中主链接(下拉标题)将我带到页面,然后使用下拉拆分,其中包含可以重定向到其他业务相关链接的锚点列表。问题是下拉儿童不会在任何地方重定向。如果我将链接放在导航栏上的另一个项目上,它可以正常工作。

Plunker: 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

1 个答案:

答案 0 :(得分:1)

我在按钮内移动了链接1路由器链接。它超越了李级别的一切。

<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>