':Active'类不工作“Router LinkActive”不工作

Question

我想在菜单栏文本被选中时更改它的颜色。

这里可能出了什么问题？

我尝试使用伪类':active'，但没有得到应用。其中as':Hover'正在工作。

我还尝试使用'Router LinkActive'，它应该添加类'Active-Link'，但这也不起作用。

我在下面给出了HTML、SCCS和TS代码：

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

    .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;
    }

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>