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

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>

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>