时间戳

首页 > 解决方案 > 当用户转到另一个菜单时，使用两个类删除 routerLinkActive

angular - 当用户转到另一个菜单时，使用两个类删除 routerLinkActive

问题描述

我正在使用 Angular 6 做一个 Web 应用程序，我正在尝试实现 routerLink 和 routerLinkActive。现在，routerLink 似乎运行良好，但routerLinkActive实际上并非如此。即使用户转到另一个菜单，它也会将类保留在标签内。

我已经按照文档添加了两个类，但是其中一个不会消失。我想将两者一起删除，现在，menu-open不会消失。我也试过：<li class="treeview" [routerLinkActive]="['active', 'menu-open']">

<li class="treeview" routerLinkActive="active menu-open">
        <a href="#">
          <i class="fa fa-cog"></i>
          <span>Administration</span>
          <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
          <li routerLinkActive="active"><a routerLink="/users-list"><i class="fa fa-group"></i> Users list</a></li>
        </ul>
      </li>

我的目标是正确删除两个类active和menu-open. 第一个似乎删除得很好，但不是第二个。

标签： angular

解决方案

您的列表中有两个嵌套routerlinkActive的 s。问题很可能就在那里。如果您希望外部在其子项之一处于活动状态时li具有active类，则可以将模板引用变量与routerLinkActive指令一起使用，如下所示：

<li class="treeview" [ngClass]="rlRef.isActive ? 'active menu-open': ''">
        <a>
          <i class="fa fa-cog"></i>
          <span>Administration</span>
          <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
          <li [ngClass]="{'active': rlRef.isActive}">
             <a routerLink="/users-list" routerLinkActive #rlRef="routerLinkActive">
                 <i class="fa fa-group"></i> Users list
              </a>
           </li>
        </ul>
</li>

请注意，当它重新加载整个页面时，我href="#"从标签中删除了。a并替换了第二个routerLinkActivefrom litoa标签。

编辑

更换

[ngClass]="{'active': rlRef.isActive}"

和

[ngClass]="rlRef.isActive ? 'active menu-open': ''"

因为ngClass在一种条件下分配多个类时效果不佳。

编辑 2

<!-- Full menu -->
<ul>

    <!-- Link without child -->
    <li [ngClass]="settingsRouteRef.isActive ? 'active another-class': ''">
          <a routerLink="/settings" routerLinkActive #settingsRouteRef="routerLinkActive">
              <i class="fa fa-gears"></i>
              <span>Settings</span>
              <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
    </li>


    <!-- Link with child -->
    <li class="treeview" [ngClass]="adminRouteRef.isActive ? 'active menu-open': ''">
            <a>
              <i class="fa fa-cog"></i>
              <span>Administration</span>
              <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu">
              <li [ngClass]="{'active': adminRouteRef.isActive}">
                 <a routerLink="/users-list" routerLinkActive #adminRouteRef="routerLinkActive">
                     <i class="fa fa-group"></i> Users list
                  </a>
               </li>
            </ul>
    </li>

    <!-- Another Link with child -->
    <li class="treeview" [ngClass]="dashboardRouteRef.isActive ? 'active menu-open': ''">
            <a>
              <i class="fa fa-cog"></i>
              <span>Dashboard</span>
              <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu">
              <li [ngClass]="{'active': dashboardRouteRef.isActive}">
                 <a routerLink="/reports" routerLinkActive #dashboardRouteRef="routerLinkActive">
                     <i class="fa fa-group"></i> Reports
                  </a>
               </li>
            </ul>
    </li>
</ul>

推荐阅读