使用Angular router

Question

切換並保留ng2-bootstrap 的選定選項卡我有一個組件顯示使用 ng2-bootstrap 和 tab的選項卡。

實施例：

<tabset> 
    <tab heading="Info" [active]="tabs[0].active"> 
     <account-data *ngIf="tabs[0].active"></account-data> 
    </tab> 
    <tab heading="Users" [active]="tabs[1].active"> 
     <manage-users *ngIf="tabs[1].active"></manage-users> 
    </tab> 
    <tab heading="Billing" [active]="tabs[2].active"> 
     <account-billing *ngIf="tabs[2].active"></account-billing> 
    </tab> 
</tabset> 

注：tabs[N].active由組件控制，並且已經同步製表變化和路由。但我有這樣的感覺，那就是我做錯了，因爲在選定的選項卡中很難管理路由。讓我們在第二個選項卡，在這一天到底應該管理下面的子路線：

.../users   -> provide list of users 
.../users/new  -> create new user 
.../users/:id  -> show a particular user 
.../users/:id/edit -> edit a particular user 

這並不容易，因爲顯示已選項卡中的組件使用這條路線：

.../:tab 

它如果出現這樣的情況，會更容易：

<tabset> 
    <tab heading="Info" [routerLink]="['info']"></tab> 
    <tab heading="Users" [routerLink]="['users']"></tab> 
    <tab heading="Billing" [routerLink]="['billing']"></tab> 
</tabset> 
<router-outlet></router-outlet> 

有沒有人爲此提供解決方案？這個問題應該是很常見......

Answer 1

我已經解決了這個對我自己這（容易）的方式完全沒有NG2的自舉，只是本地的自舉CSS類，routerLink和routerLinkActive：

<ul class="nav nav-tabs"> 
    <li class="nav-item"> 
     <a class="nav-link" 
     routerLinkActive="active" 
     [routerLink]="['info']">Info</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" 
     routerLinkActive="active" 
     [routerLink]="['users']">Users</a> 
    </li> 

    ... 

    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active"> 
     <router-outlet></router-outlet> 
    </div> 
    </div> 

Answer 2

嘿我已經想出瞭解決這個問題的方法。 嘗試以下操作：

 <tabset class="nav nav-tabs"> 
      <tab> 
       <template tabHeading> 
        <a class="routing_link" routerLink="/dashboard">Dashboard</a> 
       </template> 
      </tab> 
      <tab> 
       <template tabHeading> 
        <a class="routing_link" routerLink="/execution">Execution</a> 
       </template> 

      </tab> 
      <tab> 
       <template tabHeading> 
        <a class="routing_link" routerLink="/history">History</a> 
       </template> 
      </tab> 
     </tabset> 

編輯

<div class="col-lg-12"> 
<tabset class="nav nav-tabs"> 
     <tab> 
      <template tabHeading> 
       <a class="routing_link" routerLink="/dashboard">Dashboard</a> 
      </template> 
     </tab> 
     <tab> 
      <template tabHeading> 
       <a class="routing_link" routerLink="/execution">Execution</a> 
      </template> 
     </tab> 
     <tab> 
      <template tabHeading> 
       <a class="routing_link" routerLink="/history">History</a> 
      </template> 
     </tab> 
    </tabset> 
</div> 
<div class="col-lg-12"> 
    <router-outlet></router-outlet> 
</div>