如何使导航栏在 angular2 中突出显示？答案

【问题标题】：How can i make nav bar highlighted in angular2?如何使导航栏在 angular2 中突出显示？
【发布时间】：2016-09-13 02:33:18
【问题描述】：

我想为此激活导航栏，我正在使用 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%
}

【问题讨论】：

如何进入特定页面？使用哪个功能？你在使用角度路由器吗？

标签： css angular typescript

【解决方案1】：

您可以使用routerLinkActive 为您的活动路由添加一些css，例如：

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

【讨论】：

这里代替登录，我使用了一些动态属性，例如{{menu}}，这是绑定这个 routerLink="{{menu}}" 的正确方法吗？请提出建议。

【解决方案2】：

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

【讨论】：

没有在 html 或控制台中获得任何值：-- {{menu}}
认真的吗？试试<li>{{menu}}</li>。您甚至在 {{menu}} 中获得任何价值吗？
是的，比我得到的价值要高，但是当我要添加 routerLink="menu" routerLinkActive="active" 时，它就消失了。
是的错误是这样的：---EXCEPTION: Error in ./Menu class Menu - inline template:18:64
到目前为止，我建议您尝试使用静态路由 n 检查解决方案是否有效。例如。 routerLink="/contacts"