2017-01-23 3 views
0

Ich habe eine sidenav Bar mit einigen RegisterkartenWie wird die Bootstrap-Navigationsleiste eingestellt, die im Angular 2 RouterModule als "aktive" Klasse ausgewählt wurde?

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

Wie die navbar einstellen ausgewählt, aktiv zu sein? Ich benutze RouterModule (nicht [routerLink]) und habe mein Routing in app.routing.ts deklariert.

+0

Versuchen Sie [routerLinkActive] = "[ 'aktiv']" – Habeeb

+0

@Habeeb In meinem Fall, wo mache ich das sagen? Mit ? – Protagonist

+0

@Habeeb Ich habe versucht, aber das Problem ist, es wird als hervorgehoben oder ausgewählt – Protagonist

Antwort

1

Es funktioniert für mich von

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

routerLinkActive="active" mit der "aktiven" Klasse zum <a> Element wird hinzuzufügen.

Fand es dort: Router directives

Sie könnten definierten Routen, hier Define routes beschrieben verwenden.

Verwandte Themen