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>