Angular Bootstrap Navigation 无法在导航选项卡之间切换

Question

我在 angular 应用程序中使用引导导航，如下所示 HTML

<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="test-tab" data-toggle="tab" href="#" routerLink="/test" role="tab" aria-controls="home" aria-selected="true">Test</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="viral-tab" data-toggle="tab" href="#" routerLink="/viral"  role="tab" aria-controls="profile" aria-selected="false">Viral</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="user-tab" data-toggle="tab" href="#" routerLink="/user/{{username}}" role="tab" aria-controls="contact" aria-selected="false">User</a>
    </li>
   
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="test" role="tabpanel"  aria-labelledby="test-tab">
    
    </div>
    <div class="tab-pane fade" id="viral" role="tabpanel" aria-labelledby="viral-tab"></div>
    <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
       
    </div>
  </div>
  </div>

我无法在不同的导航选项卡之间切换，它始终是活动的"test-tab" 。 如何在不同的导航选项卡之间切换。？

Answer 1

尝试使用 routerLinkActive 设置活动 class。我已经修改了您的代码并删除了 href 属性，因为它在不用于导航时会引起麻烦。

<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link" id="test-tab" data-toggle="tab" routerLinkActive="active" routerLink="/test"  role="tab" aria-controls="home" aria-selected="true">Test</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="viral-tab" data-toggle="tab" routerLinkActive="active" routerLink="/viral"  role="tab" aria-controls="profile" aria-selected="false">Viral</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="user-tab" data-toggle="tab" routerLinkActive="active" routerLink="/user/{{username}}" role="tab" aria-controls="contact" aria-selected="false">User</a>
    </li>
   
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="test" role="tabpanel"  aria-labelledby="test-tab">
    
    </div>
    <div class="tab-pane fade" id="viral" role="tabpanel" aria-labelledby="viral-tab"></div>
    <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
       
    </div>
  </div>
  </div>