Класс ': active' не работает, ни 'routerLinkActive' не работает

Question

Я хочу изменить цвет текста строки меню, пока он выбран.

Что, вероятно, идет не так?

Я пытался использовать псевдокласс ': active', но не применяется. Где работает ': hover'.

Я также попытался использовать 'routerLinkActive', который должен добавить класс 'active-link', но это также не работает.

У меня есть учитывая приведенный ниже код HTML, SCCS и TS:

menubar. html

<div class="links">
  <div class="links-hidden" *ngIf="!myVar">
    <a class="lnk-btn" (click)="goToDebugger()" routerLinkActive='active-link'>Debugger</a>
    <a class="lnk-btn" (click)="goToProvision()"> OTA </a>
    <a class="lnk-btn" (click)="goToProvision()"> Configuration Manager </a>
    <a class="lnk-btn" (click)="goToProvision()"> Device Monitor </a>
    <a class="lnk-btn" (click)="goToDeviceInfo()" routerLinkActive='active-link'>Device Info</a>
  </div>
</div>

<mat-icon class="search-icon" (click)="toggle()" *ngIf="!myVar">search</mat-icon>
<div class="searchbar" *ngIf="myVar">
  <mat-icon class="search-icon-searchbar" (click)="goToSearchDeatails()">search</mat-icon>
  <select class="dropdown">
    <option value="MAC">MAC</option>
    <option value="UUID">UUID</option>
    <option value="Email">Email</option>
    <option value="Serial">Serial</option>
  </select>
  <div class="search">
    <input class="search-bar" type="search" placeholder="Search..." aria-label="Search" />
  </div>
  <mat-icon class="close-icon" (click)="toggle()">close</mat-icon>
</div>
<mat-icon class="person-icon" (click)="logout()">person</mat-icon>

menubar.s css

    .links {
        padding-left: 480px;
        padding-bottom: 2px;
        display: inline-block;
    }
    .links-hidden {
        .lnk-btn {
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 16px;
             margin-right: 19px;
             color: white;
            cursor: pointer;
            &:hover {
                color: #7f93aa;
            }
            &:active {
                 color: #7f93aa;
            }
        }
    }
    .mat-icon {
        color: white;
        padding-top: 5px;
        display: inline-block;
    }
    .dropdown {
        width: 75px;
        margin-left: 22px;
        background-color: #062343;
        color: rgb(19, 241, 241);
        border: transparent;
    }
    .search {
        display: inline-block;
        margin-left: 15px;
        .search-bar {
        background-color: #062343;
        color: rgb(19, 241, 241);
        height: 40px;
        width: 880px;
        border: transparent;
        padding: 5px;
        }
    }
    .search-icon {
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
    }
    .search-icon-searchbar {
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
    }
    .searchbar {
        display: inline-block;
        margin-left: -77%;
        background-color: #062343;
    }
    .close-icon {
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
        margin-left: 25px;
    }
    .person-icon {
        vertical-align: middle;
        cursor: pointer;
    }
    .active-link {
        color: #7f93aa;
    }

menubar.ts

import { Component, OnInit, Inject, Directive } from '@angular/core';
import { Router, RouterLinkActive, RouterModule } from '@angular/router';

@Component({
  selector: 'app-menubar',
  templateUrl: './menubar.component.html',
  styleUrls: ['./menubar.component.scss']
})

@Directive({
  selector: '[routerLinkActive]'
})

export class MenubarComponent implements OnInit {
  public myVar: boolean = false;

  constructor(private router: Router) {}

  ngOnInit() {}

  toggle() {
    this.myVar = !this.myVar;
    console.log(this.myVar);
  }

  logout() {
    this.router.navigate(['/login']);
    localStorage.setItem('smtLogin', '0');
  }

  goToDebugger() {
    this.router.navigate(['/debugger']);
  }

  goToDeviceInfo() {
    this.router.navigate(['/device-info']);
  }
}

Answer 1

Вы можете применить ссылки непосредственно в шаблоне и заключить стиль CSS в контейнер div. Попробуйте следующее

<div class="links">
  <div class="links-hidden" *ngIf="!myVar">
    <div [routerLinkActive]="['active-link']">
      <a class="lnk-btn" [routerLink]="['debugger']">Debugger</a>
    </div>
    .
    .
    .
  </div>
</div>

Answer 2

routerLinkActive - это селектор angular, просто интересно, почему вы добавили его в качестве селектора в свой компонент.

В идеале что-то вроде этого должно работать для вас.

 <a routerLink="home" routerLinkActive='active-link'>Home</a>

Answer 3

это привязка свойства, поэтому добавлено [routerLinkActive]="'active'" или вы можете напрямую передать [routerLink]="['device-info']".

 <div class="links-hidden" *ngIf="!myVar">
   <div  [routerLink]="['device-info']" [routerLinkActive]="'active'">
      <a class="lnk-btn">Device Info</a>
   </div>
 </div>