[英]':active' class not working neither 'routerLinkActive' is working
我想在选择菜单栏文本时更改它的颜色。
这里可能出了什么问题?
我尝试使用伪类 ':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']);
}
}
这是一个属性绑定,因此添加[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>
您可以直接在模板中应用链接并将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.