Angular 2中的Bootstrap導航菜單

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

只需對所有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指令的更多信息。