使用Angular路由器切换并保留ng2-bootstrap <tabset>,<tab>的选定选项卡

Question

我有一个组件显示使用ng2-bootstrap tabset和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-bootstrap,只是本机引导程序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>