Angular-在标题下拉列表中添加活动样式

时间:2019-07-18 08:52:07

标签: css angular

我正在尝试在路线匹配时在按钮中添加活动样式。

下拉菜单元素可以正确添加活动样式,但父元素不具有此样式。

<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下拉菜单元素?

2 个答案:

答案 0 :(得分:0)

您可以这样做

<a routerLink="/entidad/listado" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/entidad/listado" [routerLinkActive]="['class1', 'class2']">Bob</a>

答案 1 :(得分:0)

您可以尝试使用isActive的{​​{1}}方法:

https://angular.io/api/router/Router#isActive

要在任一下拉菜单路由处于活动状态时将router类应用于父active标签,可以添加一个<a>属性,如下所示:

[class.active]

因此,在您的父元素上,它看起来像这样:

[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)"