[英]Bootstrap Navigation menu in Angular 2
通过使用Bootstrap 4构建导航菜单 ,我创建了一个顶部导航菜单:
<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>
问题是,当我单击菜单项(例如home
,它没有显示为活动状态。 我还没有包含bootstrap.js
。
代替bootstrap.js
和jQuery
,使Angular 2中的选定菜单处于活动状态的最佳方法是什么?
只需对所有routerLink
项目使用RouterLinkActive
指令:
<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>
bootstrap
的类是active
,它会突出显示当前处于活动状态的链接。 您可以在此处阅读有关RouterLinkActive
指令的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.