':active' 类不起作用 'routerLinkActive' 也不起作用

Question

I want to change the color of the menu bar text while it is selected.

What is probably going wrong here?

I tried using the pseudo class ':active' but is not getting applied. Where as ':hover' is working.

I also tried using 'routerLinkActive' which is supposed to add the class 'active-link', but that is also not working.

I have given the HTML, SCCS and TS code below:

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.scss

    .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

it's a property binding so added [routerLinkActive]="'active'" or you can directly pass the [routerLink]="['device-info']" .

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

Answer 2

You could apply links directly in the template and enclose the CSS styling in a div container. Try the following

<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 3

routerLinkActive is an angular selector, just wondering why you have added it as a selector in your component.

Ideally something like this, should work for you.

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