Переключить и перенести выбранную вкладку ng2-bootstrap <tabset>, <tab> с использованием углового маршрутизатора

Question

У меня есть компонент, показывающий вкладки с использованием ng2-bootstraptabset и 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>