导航时嵌套选项卡中的Angular2路由器不会触发事件类

Question

在父选项卡之间导航时，子选项卡会丢失事件类状态。

第一次呈现 View 时，选项卡在选择时按预期激活类:


浏览子选项卡工作正常 - 选定的子选项卡显示为事件。
但是，如果我导航到另一个父选项卡:


然后回到第一个父选项卡:


子选项卡“Opgaver”(之前已选择)不再处于事件状态。所有子选项卡都会发生这种情况 - 这意味着没有子选项卡显示为事件的，无论在导航之前选择了哪个。

我一直在研究以下问题和问题，但没有一个解决方案对我有用。

StackQ 1

StackQ 2

Angular issue 8397

Angular issue 6204

我正在使用路由器 3.0.0。

Chrome 中的控制台在导航时也不会引发错误。

我猜这个错误是因为Router的属性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>

选项卡组件.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>

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

Answer 1

似乎您描述的行为仍然存在于 Angular8 中。
一种解决方法可能是不要在链接上使用“[routerLinkActive]”指令，而是使用 [ngClass] 指令来设置您的事件类。
然后通过路由器方法“isActive()”检查条件。
这种方法使您无需在组件中添加其他属性以使您的状态保持最新，如问题评论中所述。
您的方法(摘录):

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

(不要忘记在 Controller 中注入(inject)“路由器”以使用其公共(public)方法)