如何在 Angular 2 RouterModule 中将 Bootstrap 导航栏设置为“活动”类？答案

【问题标题】：How to set Bootstrap navbar selected to be “active” class in Angular 2 RouterModule?如何在 Angular 2 RouterModule 中将 Bootstrap 导航栏设置为“活动”类？
【发布时间】：2017-06-07 16:07:15
【问题描述】：

我有一个带有一些标签的侧导航栏

<div class="side-wrap-div">
        <div class="list-group sidebar-nav">
            <li class="list-group-item borderBottomMenu active" >
                <a href="#/{{ DocumentURL }}">Document</a>
                <span class="marker-logo"></span>
                <span class="logo document-logo-click" ></span>
            </li>
        </div>
        <div class="list-group bottom-fixed">
            <div  id="collapse3" *ngIf="showContact">
                <a href="#/contact/{{ currentTaskId }}" class="panel-collapse list-group-item collapse">
                    <span class="logo contact-logo" ></span>Contact
                </a>
        </div>
    <div>

如何将选中的导航栏设置为活动状态？我正在使用 RouterModule(not [routerLink]) 并在 app.routing.ts 中声明了我的路由。

【问题讨论】：

你试过了吗[routerLinkActive]="['active']"
@Habeeb 在我的情况下，我应该把它放在哪里？用 ?
@Habeeb 我试过了，但问题是，它显示为突出显示或选中
stackoverflow.com/questions/35969445/… 看到这个

标签： twitter-bootstrap angular angular2-routing nav

【解决方案1】：

使用它对我有用

<a class="nav-link" routerLink="my-route" routerLinkActive="active">My Route</a>

routerLinkActive="active" 会将“活动”类添加到<a> 元素。

在那里找到它：Router directives

您可能必须使用已定义的路由，此处描述为Define routes。

【讨论】：