我试图在路线匹配时在按钮中添加活动样式。
下拉菜单元素可以正确添加活动样式,但父元素不具有此样式。
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false">{{'entity' |
translate}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/listado']"><i class="fa fa-list"></i> {{'list' | translate}}</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/formulario']"><i class="fa fa-plus"></i> {{'new' | translate}}</a></li>
</ul>
</li>
<li>
</ul>
</div>
所以问题是:如何在父级中添加活动元素
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false">{{'entity' | translate}} <span class="caret"></span></a>
选择ul下拉菜单元素时?
最佳答案
您可以尝试使用isActive
的router
方法:
https://angular.io/api/router/Router#isActive
要在任一下拉菜单路由处于活动状态时将active
类应用于父<a>
标记,可以添加[class.active]
属性,如下所示:
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)"
因此,在您的父元素上,它看起来像这样:
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)">
{{'entity' | translate}} <span class="caret"></span>
</a>