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