在父选项卡之间导航时，子选项卡将失去活动的类状态 .

第一次显示视图时，选项卡在选中时按预期激活类：
enter image description here

浏览子选项卡可以正常工作 - 选定的子选项卡显示为活动状态 . 但是，如果我导航到另一个父标签：
enter image description here

然后回到第一个父标签：
enter image description here

子选项卡“Opgaver”（之前选择）不再有效 . 对于所有子选项卡都会发生这种情况 - 这意味着无论在导航之前是否选择了哪个选项卡，都不会显示任何子选项卡 .

我一直在研究以下问题和问题，但没有一个解决方案适合我 .

StackQ 1

StackQ 2

Angular issue 8397

Angular issue 6204

我使用的是Router 3.0.0 .

此外，Chrome中的控制台在导航时不会出错 .

我猜这个错误是因为导航时来自路由器的属性routerLink没有得到更新？或者它可能是我在html文件中的设置：

Citizen-Page.html （ selector: m3-citizen-navigation ）

<div class="page-content-wrapper full-height email-layout">
<div class="content full-height">
    <m3-tabs [tabs]="tabs$ | async" [dashboardActive]="dashboardActive$ | async" (tabClosed)="closeTab($event)" 
    (dashboardActivated)=navigateToDashboard($event) class="citizen">
    </m3-tabs>
    <router-outlet></router-outlet>
</div>

Tabs-Component.html （ selector: m3-tabs ）

<ul class="nav nav-tabs m3-tabs nav-tabs-complete">
<li [class.active]="dashboardActive">
    <a href="javascript:;" (click)="activateDashboard()">Overblik</a>
</li>
<li *ngFor="let tab of tabs" [class.active]="tab.active">
    <a [routerLink]="[tab.url]">
        {{ tab.caption }}
        <span class="tab-close close" (click)="closeTab($event, tab)">
            <i *ngIf="tab.hasUpdates" class="fa fa-exclamation-triangle" style="color:blue"></i>
            <i class="fa fa-close"></i>
        </span>
    </a>
</li>

Citizen-details-page.html （ selector: citizen-details-page ）

<div>
    <m3-citizen-navigation [citizen]="citizen$ | async" [cpr]="cpr" (caseRemoved)="removeCase($event)"></m3-citizen-navigation>
    <div class="tab-content" style="padding: 0">
        <router-outlet></router-outlet>
    </div>
</div>

Citizen-navigation-page.html （ selector: m3-citizen-navigation ）

<div class="tab-navigation-container m3-sub-navigation" *ngIf="citizen">
<ul class="nav nav-tabs m3-tabs">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/citizens/{{citizen.id}}"><span>Overblik</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/journals"><span>Journal</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/tasks"><span>Opgaver</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/plans"><span>Plan</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/interviews"><span>Samtale</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/cvs"><span>CV</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/foundations"><span>Grundlag</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/absences"><span>Fravær</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/approaches"><span>Tiltag</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/availabilities"><span>Rådighed</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/dialogues"><span>Dialog</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/progressions"><span>E&P</span></a>
    </li>
</ul>

如果您需要查看我的路由或组件中的代码段，请告诉我们 .

angular router