From Build a Navigation Menu with Bootstrap 4 , I have created a top navigation menu:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container">
<a class="navbar-brand">Angular Router</a>
<ul class="nav navbar-nav" routerLinkActive="active">
<li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
<li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
The problem is, when I click on a menu item like home
, it is not shown as active. I haven't included bootstrap.js
.
Instead of bootstrap.js
& jQuery
, what is the best way I can make selected menu as active in Angular 2?
Simply use RouterLinkActive
directive on all routerLink
items:
<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="about" routerLinkActive="active">About</a></li>
<li class="nav-item"><a class="nav-link" routerLink="courses" routerLinkActive="active">Courses</a></li>
active
is bootstrap
's class which will highlight currently active link. You can read more about RouterLinkActive
directive here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.