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

Question

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

<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（不是 [routerLink]）并在 app.routing.ts 中声明了我的路由。

Answer 1

它通过使用对我有用

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

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

在那里找到它：路由器指令

您可能必须使用定义的路由，此处描述了定义路由。