2017-01-23 2 views
0

J'ai un bar sidenav avec quelques ongletsComment définir la barre de navigation Bootstrap sélectionnée comme classe "active" dans Angular 2 RouterModule?

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

Comment régler la barre de navigation sélectionné pour être actif? J'utilise RouterModule (pas [routerLink]) et ai déclaré mon routage dans app.routing.ts.

+0

Avez-vous essayé [routerLinkActive] = "['active']" – Habeeb

+0

@Habeeb Dans mon cas, où dois-je mettre cela? Avec ? – Protagonist

+0

@Habeeb J'ai essayé mais le problème est, il est affiché en surbrillance ou sélectionné – Protagonist

Répondre

1

Il travaille pour moi en utilisant

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

routerLinkActive="active" ajoutera la classe "active" à l'élément <a>.

Je l'ai trouvé là: Router directives

Vous pourriez avoir à utiliser des routes définies, décrites ici Define routes.