twitter-bootstrap Angular 2 中的 Bootstrap 导航菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41222250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navigation menu in Angular 2
提问by jaks
From Build a Navigation Menu with Bootstrap 4, I have created a top navigation menu:
从Build a Navigation Menu with 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>
The problem is, when I click on a menu item like home, it is not shown as active. I haven't included bootstrap.js.
问题是，当我单击像 的菜单项时home，它没有显示为活动状态。我没有包括bootstrap.js。
Instead of bootstrap.js& jQuery, what is the best way I can make selected menu as active in Angular 2?
而不是bootstrap.js& jQuery，我可以使所选菜单在 Angular 2 中处于活动状态的最佳方法是什么？
回答by Stefan Svrkota
Simply use RouterLinkActivedirective on all routerLinkitems:
只需RouterLinkActive对所有routerLink项目使用指令：
<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>
activeis bootstrap's class which will highlight currently active link. You can read more about RouterLinkActivedirective here.
activeisbootstrap的类将突出显示当前活动的链接。您可以在此处阅读有关RouterLinkActive指令的更多信息。
