当该链接代表两个 URL 时，如何正确标记活动导航链接？

Question

在我的 Angular 5.2 应用程序中，配置文件有两个页面：Details和Activity。任何配置文件的默认页面都是Details，因此路由设置如下（文章末尾的路由器配置的完整 Typescript 示例）：

{ path: 'profile/:id', component: ProfileComponent,
  children: [
    { path: 'details', component: ProfileDetailsComponent },
    { path: 'activity', component: ProfileActivityComponent },
    { path: '**', component: ProfileDetailsComponent }
  ]
}

ProfileComponent处理两个个人资料页面的根。它有一个页面标题和一个导航栏，并包括一个<router-outlet>用于配置文件详细信息/活动组件的元素（根据上面的路由加载）。它的 HTML 如下所示：

<div> <!-- some header stuff --> </div>

<nav>
  <ul>
    <li><a routerLinkActive="active" routerLink="./details">Details</a></li>
    <li><a routerLinkActive="active" routerLink="./activity">Activity</a></li>
  </ul>
</nav>

<div class="page-content">
  <!-- ProfileDetailsComponent or ProfileActivityComponent will be loaded here -->
  <router-outlet></router-outlet>
</div>

正如您所看到的，active当我在正确的页面上时，我正在使用 RouterLinkActive 指令将这些选项卡放在课程中间。但是，这遇到了一个问题：

• active当我打开时，详细信息选项卡（第一项）正确获取课程/users/profile/3/details。
• 但是，它不会active在我打开时获取类/users/profile/3，即使它在功能上是相同的页面——我们仍然需要显示您在“详细信息”页面上。

如果我改为将该链接写如下...

<a routerLinkActive="active" routerLink="./">Details</a>

然后，即使我在“活动”选项卡内，这也会在当前路线上的任何位置获取active课程。

我怎样才能得到这个链接，它代表一个（功能）页面，可通过两个 URL 访问，以获取任一 URL 上的“活动”类？在这种情况下，我应该使用除 routerLinkActive 之外的其他方法吗？

目前，为了解决这个问题，我已设置/users/profile/:id重定向到/users/profile/:id/details，但我希望不要进行该重定向。

---

我的应用程序的路由器配置

app-routing.module.ts

const routes: Routes = [
  { path: 'users', loadChildren: 'app/users/users.module#UsersModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

users-routing.module.ts

（所有下面定义的路由都相对于/users/来自 app-routing 的上述路由。）

const routes: Routes = [
  { path: '', component: UserListComponent },
  { path: 'profile/:id', component: ProfileComponent,
    children: [
      { path: 'details', component: ProfileDetailsComponent },
      { path: 'activity', component: ProfileActivityComponent },
      { path: '**', component: ProfileDetailsComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

当前的补丁修复（在上面问题部分的末尾提到）有这**条路线，而不是设置：

      { path: '**', redirectTo: 'details' }

...但如前所述，我真的更愿意在/profiles/:id没有方向的情况下保持路线可用。

Answer 1

如果不实际对应用程序进行实时测试，很难提供帮助，但请尝试以下操作：

const routes: Routes = [
  { path: '', component: UserListComponent },
  { path: 'profile/:id', component: ProfileComponent,
    children: [
      { path: '', component: ProfileDetailsComponent }
      { path: 'details', component: ProfileDetailsComponent },
      { path: 'activity', component: ProfileActivityComponent },
    ]
  }
];

此外，添加[routerLinkActiveOptions]="{exact:false}"跳过对路由的严格验证：

<li><a routerLinkActive="active" routerLink="/details" [routerLinkActiveOptions]="{exact:false}>Details</a></li>

编辑1：

根据您的评论，我很困惑，如果/profile/:id应该转到详细信息，那么路线不应该是这样的吗？

const routes: Routes = [
      { path: '', component: UserListComponent },
      { path: 'profile/:id', component: ProfileDetailsComponent , // not ProfileComponent  but: ProfileDetailsComponent 
        children: [
          { path: 'details', component: ProfileDetailsComponent },
          { path: 'activity', component: ProfileActivityComponent },
        ]
      }
    ];

对不起，如果我误会了，这是我最后一个工作时间，我的大脑被炸了... xD