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

Question

我有一个带有一些标签的sidenav栏

<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"会添加＆＃34;有效＆＃34; class <a>元素。

在那里找到它：Router directives

您可能必须使用已定义的路线，如Define routes所述。