Angular:在子路由上设置特定的路由链接

时间:2018-01-16 20:07:30

标签: angular angular-router

我有一套路线:

process.argv.push("--ignore-ssl-errors=true");

和一组链接:

{
  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> 处于有效状态时,由于UserProfileManagementComponent而未突出显示UserManagementComponent链接。

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

1 个答案:

答案 0 :(得分:2)

结束使用RouterLinkActiveOptions课程中提到的解决方案(一个hacky,但对我有用):

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