css - Angular - 在标题下拉列表中添加事件样式

Question

我尝试在路由匹配时在按钮中添加事件样式。

下拉菜单元素正确添加事件样式，但父元素没有此样式。

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

Answer 1

您可以尝试使用 isActive router 的方法:

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

申请active给你 parent 上课<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>