Я создал страницу, используя угловой материал с боковой панелью и вкладкой.
Я использую angular 7.
Вот образец изображения ->
Когда я перехожу на вкладку content, класс is-active
больше не применяется к выбранной группе на боковой панели (без выделения). он разделяет тот же путь. Группа должна быть выделена, когда мы переходим на вкладку содержимого. Я пробую несколько методов, но все равно не могу этого добиться.
Вот мой код:
app.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>
app.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 {}
[routerLinkActive]="['is-active']"
будет истинным для групп для определенного URL-адреса, и я думаю, что, поскольку вы используете панель вкладок сnav-links
, поэтому URL-адрес меняется, а параметрis-active
из групп не выбран. Это происходит?? или в обоих случаях URL-адрес одинаков. - person Abhishek Kumar   schedule 25.03.2019group/{{Dynamic_Code}}/overview
вызывается для вкладки контентаgroup//{{Dynamic_Code}}/content
- person SKL   schedule 25.03.2019