twitter-bootstrap - Angular 2 中的 Bootstrap 导航菜单

Question

来自 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 中激活所选菜单的最佳方式是什么？

Answer 1

只需在所有 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 的类，它将突出显示当前事件的链接。您可以阅读有关 RouterLinkActive 指令的更多信息 here .