Question

在父标签之间导航时，子标签会丢失活动的类状态。

首次显示视图时，选项卡在选中时按预期激活类：

浏览子选项卡可以正常工作 - 所选子选项卡显示为活动状态。但是如果我导航到另一个父标签：

然后回到第一个父标签：

子选项卡“Opgaver”（以前选择过）不再有效。所有子选项卡都会发生这种情况 - 这意味着没有子选项卡显示为活动状态，无论在导航之前选择了哪个选项卡。

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

我正在使用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>

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

Answer 1

看来您描述的行为仍存在于Angular8中。

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

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

这种方法可避免您在组件中添加其他属性，以使状态保持最新，如问题注释中所述。

您的方法（节选）：

    {
      name       = "test-d01"
      zone       = "us-east1-b"    
      disk = [
        {
          disk_name = "test-d01-data"
          disk_type = "pd-ssd"
          disk_size = "60"
        },
        {
          disk_name = "test-d01-data-disk"
          disk_type = "pd-standard"
          disk_size = "15"
        },
        {
          disk_name = "test-d01-commitlog-disk"
          disk_type = "pd-ssd"
          disk_size = "30"
        }
      ]
    },
    {
      name       = "test-d02"
      zone       = "us-east1-b"
           
        disk=[
        {
        disk_name = "test-d02-data"
        disk_type = "pd-ssd"
        disk_size = "60"
        },
        {
        disk_name = "test-d02-data-disk"
        disk_type = "pd-standard"
        disk_size = "15"
        }
        ]
    },
  ]

解决方法：

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

（不要忘记在控制器中插入“路由器”以使用其公共方法）

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

1 个答案: