Angular 2中的Bootstrap Navigation菜单

Question

从使用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

只需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>

active是bootstrap的课程将突出显示当前活动的链接.你可以阅读更多有关RouterLinkActive指令这里.