Угловая подсветка на основе routerLinkActive

Question

я хочу переключить подсветку для 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 не выделяется

Answer 1

Если вы хотите, чтобы ссылка на панель мониторинга была активной только при отсутствии параметра маршрута, вам нужно добавить routerLinkActive и [routerLinkActiveOptions]="{exact: true}" к вашему узлу панели управления li.

Кроме того, вам не нужно устанавливать класс active с помощью ngClass, потому что 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>