Angular 角度:在子路由上,将特定路由链接设置为活动

Angular 角度:在子路由上,将特定路由链接设置为活动,angular,angular-router,Angular,Angular Router,我有一套路线: { path: 'user-management', component: UserManagementComponent, }, { path: 'user-management/profile', component: UserProfileManagementComponent }, { path: 'user-management/groups', component: UserGroupManagementComponent }, { pat

我有一套路线:

{
  path: 'user-management',
  component: UserManagementComponent,
},
{
  path: 'user-management/profile',
  component: UserProfileManagementComponent
},
{
  path: 'user-management/groups',
  component: UserGroupManagementComponent
},
{
  path: 'user-management/permissions',
  component: PermissionsManagementComponent
},
和一组链接:

<div class="row p-section-sub-menu-outer-row-border">
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       routerLink="/user-management/groups"
       [routerLinkActiveOptions]="{exact:true}"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.MANAGE_USER_GROUPS' | translate}}
  </div>
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       routerLink="/user-management"
       [routerLinkActiveOptions]="{exact:true}"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.USER_MANAGEMENT' | translate}}
  </div>
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       routerLink="/user-management/permissions"
       [routerLinkActiveOptions]="{exact:true}"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.MANAGE_USER_PERMISSIONS' | translate}}
  </div>
</div>

{{'USER_MANAGEMENT.MANAGE_USER_GROUPS'{124; translate}}
{{'USER_MANAGEMENT.USER_MANAGEMENT'| translate}}
{{'USER_MANAGEMENT.MANAGE_USER_PERMISSIONS'{124; translate}}
问题是激活时的
UserProfileManagementComponent
不会突出显示
UserManagementComponent
链接,因为
routerLinkActiveOptions


有没有办法强迫它以某种方式激活?

最终使用了
RouterLinkActiveOptions
类中提到的解决方案(这是一个黑客的解决方案,但对我来说很有用):


{{'USER_MANAGEMENT.USER_MANAGEMENT'| translate}}
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       [routerLinkActiveOptions]="{exact:true}"
       routerLink="/user-management"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.USER_MANAGEMENT' | translate}}
    <span routerLink="/user-management"></span>
    <span routerLink="/user-management/profile"></span>
  </div>