如何在angular2中突出显示导航栏?

时间:2016-09-12 18:11:26

标签: css angular typescript

我想让navbar处于活动状态,我正在使用css但是当我要刷新页面时,活动标签将删除我如何在角度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%
}

2 个答案:

答案 0 :(得分:1)

您可以使用routerLinkActive向您的有效路线添加一些css,例如:

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

答案 1 :(得分:1)

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