带有下拉路由的 Angular Bootstrap 导航栏答案

【问题标题】：Angular Bootstrap Navbar With Dropdowns Routing带有下拉路由的 Angular Bootstrap 导航栏
【发布时间】：2021-07-12 12:25:26
【问题描述】：

我目前正在使用 Bootstrap 导航栏创建一个 Angular 项目。导航栏有下拉菜单，其中包含将用户路由到不同页面的下拉项目。

我已经安装了 Bootstrap、jQuery 和 Popper。

我的问题是，当我单击下拉菜单或下拉项目（它们是 <.a> 标记）时，我的项目不会路由到指定的页面并且没有任何反应。网址也保持不变。

在下面的示例代码中，我有一个下拉菜单，当单击或单击下拉项目之一时，用户将被路由到“库存”页面。

这是我的导航栏 HTML 代码：


<nav class="navbar navbar-expand-lg">

  <a [routerLink]="['/test']">
    <img class="img-responsive navLogo" src="assets/images/LogoNoBG.png" width="75" height="65">
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">

      <!-- Inventory -->

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" [routerLink]="['inventory']" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Inventory
        </a>

        <!-- Dropdown Items -->

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" [routerLink]="['inventory']">Example 1</a>
          <a class="dropdown-item" [routerLink]="['inventory']">Example 2</a>
          <a class="dropdown-item" [routerLink]="['inventory']">Example 3</a>
          <a class="dropdown-item" [routerLink]="['inventory']">Example 4</a>
        </div>
      </li>

    </ul>

  </div>

</nav>

我不确定它为什么不起作用。任何帮助，将不胜感激。如果您知道在 Angular 中使用下拉菜单创建导航栏的任何其他方式，请告诉我。谢谢！

【问题讨论】：

我希望您找到解决此问题的好方法。你能分享一下吗？我正在构建类似的东西。
@Nodira 我发布了一个我们最终使用的代码示例。希望对您有所帮助！

标签： html jquery angular twitter-bootstrap bootstrap-4

【解决方案1】：

我很确定问题是我忘记在路线前添加 /。

我有一段时间没有从事这个项目了。

但这是我们最终使用的工作代码示例：

<nav class="navbar navbar-expand-lg">
 
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
  
        <!-- Navbar Item One -->
  
        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Navbar Item One
          </a>

          <!-- Dropdown Items -->
  
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" [routerLink]="['/route1']">Dropdown Item One</a>
            <a class="dropdown-item" [routerLink]="['/route2']">Dropdown Item Two</a>
          </div>
        </li>
  
        <!-- Navbar Item Two -->
  
        <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Navbar Item Two
            </a>

            <!-- Dropdown Items -->
    
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" [routerLink]="['/route1']">Dropdown Item One</a>
              <a class="dropdown-item" [routerLink]="['/route2']">Dropdown Item Two</a>
            </div>
          </li>

      </ul>
  
    </div>
  
  </nav>

【讨论】：