导航时，嵌套选项卡中的Angular2路由器不会触发活动类

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

第一次呈现视图时，选中该选项卡时，该类按预期处于活动状态：

在子选项卡之间导航工作正常-选定的子选项卡显示为活动。 但如果我导航到另一个父选项卡：

然后返回到第一个父选项卡：

子选项卡“Opgaver”（之前已选择）不再处于活动状态。所有子选项卡都会发生这种情况，这意味着无论导航前选择了哪个子选项卡，都不会将任何子选项卡显示为活动

我一直在研究以下问题，没有一个解决方案对我有效

我正在使用路由器3.0.0

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

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

公民页面.html（

选择器：m3公民导航

）

公民详细信息页.html（

选择器：公民详细信息页

）

---

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

您描述的行为在Angular8中似乎仍然存在

解决方法可能不是在链接上使用“[RouterLink active]”指令，而是使用[ngClass]指令设置活动类

然后通过路由器方法“isActive（）”检查条件

这种方法可以避免您在组件中添加其他属性，从而使您的状态保持问题注释中提到的最新状态

你的方法（摘录）：

杂志

解决方法：

<li [ngClass]={'active': router.isActive('/citizens/' + citizen.id + '/journals', false)}">
    <a routerLink="/citizens/{{citizen.id}}/journals">Journal</a>
</li>

---

你好，我也有同样的问题。你解决这个问题了吗？是的，但需要一点努力。基本上，我们在选项卡组件中添加了一个名为“active”的布尔属性，并根据行为和期望以及一些CSS在路由时手动处理该属性。对于一些简单的标签高亮显示来说，工作太多了，但它工作得完美无缺。我建议您在创建此解决方案之前尝试并更新到Angular的最新版本。：）你的想法救了我。我还注意到，当我在angular（v8）嵌套组件中使用导航时，bootstrap4导航没有添加“show active”类。一旦我把同样的代码提高一级，它就开始工作了。最后，你的想法救了我，我很高兴它帮助了你！

<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>

<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>

<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>

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
  <a routerLink="/citizens/{{citizen.id}}/journals"><span>Journal</span></a>
</li>

<li [ngClass]={'active': router.isActive('/citizens/' + citizen.id + '/journals', false)}">
    <a routerLink="/citizens/{{citizen.id}}/journals">Journal</a>
</li>