Bootstrap Angular 中的导航菜单 2
Bootstrap Navigation menu in Angular 2
从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>
问题是,当我点击像 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>
active
是 bootstrap
的 class,它将突出显示当前活动的 link。您可以阅读更多关于 RouterLinkActive
指令 here.
从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>
问题是,当我点击像 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>
active
是 bootstrap
的 class,它将突出显示当前活动的 link。您可以阅读更多关于 RouterLinkActive
指令 here.