Routing in Angular 4, stellen aktive Link-Hintergrundfarbe ändern

Question

Ich habe eine Sidebar wie folgt aus:

 <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" ><li class="nav-item side"> 
      <a class="nav-link" href routerLinkActive="active" routerLink="">Home <span class="sr-only">(current)</span></a> 
     </li>    
     <ul class="sub-menu collapse" id="home"> 

       <li class="nav-item list-unstyled"><a class="nav-link" href routerLink="home/submenu-1">Submenu1</a></li> 
       <li class="nav-item list-unstyled"><a class="nav-link" href routerLink="home/submenu-2">Submenu2/a></li> 
      </ul> 
     <li class="nav-item side"> 
      <a class="nav-link" routerLink="firstOption">First Option</a> 
     </li> 
     <li class="nav-item side"> 
      <a class="nav-link"href routerLinkActive="active" routerLink="history">Second Option</a> 
     </li> 

Wie kann ich es machen, dass, wenn ich auf der FirstOption, die Hintergrundfarbe von FirstOption Änderungen, die zeigen, dass es aktiv ist. Da ich durch die Optionen navigieren kann, kann ich die Hintergrundfarbe nicht ändern, wenn die Liste aktiv ist. Ich möchte auch das Untermenü der ersten Heimat, offen bleiben, wenn ich Untermenü1 oder Untermenü2 geöffnet habe.

Vielen Dank.

Answer 1

Verwenden Sie dieses Dropdown-Menü ändern Hintergrundfarbe

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { 
    color: #fff; 
    text-decoration: none; 
    background-color: #00a65a; 
    outline: 0; 
}