基于 routerLinkActive 的 Angular 高亮答案

【问题标题】：Angular highlighting based on routerLinkActive基于 routerLinkActive 的 Angular 高亮
【发布时间】：2019-07-07 13:05:43
【问题描述】：

我想根据路由切换 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 添加到仪表板的<li> 标签
如果我添加它，它会用标签突出显示，我希望一次只有一个处于活动状态
如果你检查路由，两者都相似并重定向到仪表板，只有一个参数，为标签添加

标签： javascript css angular

【解决方案1】：

如果您希望仪表板链接仅在没有路由参数的情况下处于活动状态，则需要将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>

【讨论】：