어떻게 angular2에서 탐색 표시 줄을 강조 표시 할 수 있습니까?

Question

나는 이것을 위해 navbar를 활성화하고 싶다. CSS를 사용하고 있지만, 페이지를 새로 고칠 때 활성 탭은 어떻게 제거 할 것인가?

HTML:-- 


<ul class="nav navbar-nav navbar-top " 
        *ngFor="let menu of menus"> 
        <li><a href="" (click)="goToPage($event)">{{menu}} 
        </a> 
        </li> 
       </ul> 

CSS : -

navigation a:FOCUS { 
    box-shadow: 0 -5px 0 -4px #eee; 
    color: #ffffff; 
    width:30% 
} 

.navigation a:HOVER { 
    box-shadow: 0 -5px 0 -4px #eee; 
    color: #ffffff; 
    width:30% 
} 

Answer 1

당신은 예를 들어, 활성 경로에 일부 CSS를 추가 routerLinkActive를 사용할 수 있습니다

<a routerLink="login" routerLinkActive="active-class">Login</a> 

Answer 2

<ul class="nav navbar-nav navbar-top" *ngFor="let menu of menus"> 
    <li> 
     <a routerLink="menu" routerLinkActive="active">{{menu}}</a> 
    </li> 
</ul>