![](/img/trans.png)
[英]Angular (Angular 4) RouterLinkActive for Menu and SubMenu configuration
[英]Angular highlighting based on routerLinkActive
我想根据路由切换 routerLinkActive 的突出显示,我有一个仪表板组件,仪表板菜单项和标签菜单项都引用同一个组件,我想根据仪表板的路由向 li 项添加类路线将是
http://localhost:4300/dashboard
对于标签,路线将是
http://localhost:4300/dashboard/5d1bb53877ed8702d8a01940
菜单项的代码
<ul class="sidebar-nav">
<li [ngClass]="{ active: rlal && rlal.isActive == false }">
<a [routerLink]="['/dashboard']" (click)="loadSnippet(null)">
<mat-icon>dashboard</mat-icon>
<span>Dashboard</span>
</a>
</li>
<h3 *ngIf="labelList && labelList.length!=0">Labels</h3>
<ul class="sidebar-nav">
<li *ngFor="let label of labelList" [ngClass]="rlal && rlal.isActive ? 'active' : ''"
routerLinkActive="rlal.isActive">
<a [routerLink]="['/dashboard', label._id]" routerLinkActive #rlal="routerLinkActive"
(click)="loadSnippet(label)">
<mat-icon>label</mat-icon>
<span>{{ label.label_name }} </span>
</a>
</li>
</ul>
路线:
{
path: "dashboard",
component: DashboardComponent,
canActivate: [LoggedInGuard]
},
{
path: "dashboard/:labelId",
component: DashboardComponent,
canActivate: [LoggedInGuard]
}
突出显示适用于单个标签项,但对于仪表板, li 没有突出显示
如果您希望仪表板链接仅在没有路由参数时才处于活动状态,则需要将routerLinkActive
和[routerLinkActiveOptions]="{exact: true}"
到仪表板li
节点。
此外,您不需要通过ngClass
设置active
类,因为routerLinkActive
会为您做到这一点。
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/dashboard" (click)="loadSnippet(null)">
<mat-icon>dashboard</mat-icon>
<span>Dashboard</span>
</a>
</li>
...
<li routerLinkActive="active" *ngFor="let label of labelList">
<a [routerLink]="['/dashboard', label._id]" (click)="loadSnippet(label)">
<mat-icon>label</mat-icon>
<span>{{ label.label_name }}</span>
</a>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.