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>

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

2 个答案: