在Angular 2中高亮显示导航栏可以通过以下步骤实现:
ngClass
来动态添加CSS类。例如,你可以为当前活动的导航栏项添加一个特定的CSS类来实现高亮显示。<ul>
<li [ngClass]="{'active': isActive('/home')}"><a routerLink="/home">Home</a></li>
<li [ngClass]="{'active': isActive('/about')}"><a routerLink="/about">About</a></li>
<li [ngClass]="{'active': isActive('/contact')}"><a routerLink="/contact">Contact</a></li>
</ul>
true
,否则返回false
。import { Router } from '@angular/router';
export class NavbarComponent {
constructor(private router: Router) {}
isActive(route: string): boolean {
return this.router.url === route;
}
}
Router
服务来获取当前的路由路径。在构造函数中注入Router
服务,并在isActive
方法中使用this.router.url
来获取当前路由路径。.active {
background-color: yellow;
}
这样,当导航栏项的路由与当前路由匹配时,该导航栏项将应用active
类,从而实现高亮显示。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云负载均衡(CLB)。
领取专属 10元无门槛券
手把手带您无忧上云