我使用带有侧边栏和标签的角度材料创建了一个页面。
我使用角度 7。
这是示例图像->
示例图像：
当我导航到内容选项卡时，is-active类不再适用于侧边栏中的选定组（无突出显示）。它共享相同的路径。当我们导航到内容选项卡时，应该突出显示组。我尝试了几种方法，但我仍然无法实现。
这是我的代码：
应用程序.html
<mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
{{(group.groupName.length > 22) ? (group.groupName | slice:0:23) + '..' :(group.groupName)}}
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
{{routeLink.label}}
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>应用程序.ts
export class UserGroupComponent implements OnInit {
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog) {
this.routeLinks = [{
label: 'Overview',
link: './overview',
index: 0
},
{
label: 'Permissions',
link: './permission',
index: 1
}
];
}
ngOnInit() {}
get groups() {
return this.userManagementService.groups;
}
}app.routing.ts
const userManagementRoutes: Routes = [{
path: '',
component: UserManagementComponent,
children: [{
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [{
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
},
{
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
}
]
}]
}];
@NgModule({
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
})
export class UserManagementRoutingModule {}