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

Question

我想在選擇菜單欄文本時更改它的顏色。

這里可能出了什么問題？

我嘗試使用偽類 ':active' 但沒有得到應用。 ':hover' 在哪里工作。

我還嘗試使用應該添加類“active-link”的“routerLinkActive”，但這也不起作用。

我在下面給出了 HTML、SCCS 和 TS 代碼：

菜單欄.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>

菜單欄.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

這是一個屬性綁定，因此添加[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>

Answer 2

您可以直接在模板中應用鏈接並將 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 3

routerLinkActive 是一個角度選擇器，只是想知道您為什么將它添加為組件中的選擇器。

理想情況下，這樣的事情應該適合你。

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