我有一组路线:
{
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
链接,因为 routerLinkActiveOptions
。
有没有办法强制它以某种方式激活?
最佳答案
最终使用了 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>
关于Angular:在子路由上设置特定的路由链接处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48289035/