如何使導航欄在angular2中突出顯示？

Question

我想為此啟用導航欄，我正在使用CSS，但是當我要刷新頁面活動選項卡時，將要刪除我如何在angular 2中做到這一點？

 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

您可以使用routerLinkActive將一些CSS添加到您的活動路由中，例如：

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