使菜单在Angular中处于活动状态

Question

在我的应用程序中，我有一个带有菜单项的标题。我从服务中检索菜单列表，并在标题中显示相同的内容。当悬停在主列表上时，我会显示子菜单。当单击其子项并导航到其页面时，我希望使其父项处于活动状态（子项可以在多个级别上）。我希望用户被通知他们所在的页面。

HTML

<div class="collapse navbar-collapse">
    <ul class="navbar-nav mx-auto">
        <li class="nav-item dropdown" *ngFor="let menu of menus"></li>
        <a class="nav-link dropdown-toggle" href="#" id="{{ menu.label }}" data-toggle="dropdown"
            aria-expanded="false">{{ menu.label }}</a>
        <div *ngIf="menu.items.length > 0" class="dropdown-menu mt-0">
            <span *ngFor="let item of menu.items | SortOptionsBy: 'label'">
                <a routerLink="{{ item.url }}" *ngIf="!item.disabled" class="dropdown-item">
                    {{ item.label }}
                </a>
                <span *ngIf="item.items && item.items.length > 0">
                    <span *ngFor="let submenu of item.items | SortOptionsBy: 'label'">
                        <a href="{{ submenu.url }}" class="dropdown-item" target="_blank">
                            {{ submenu.label }}
                        </a>
                    </span>
                </span>
            </span>
        </div>
    </ul>
</div>

TS文件

getMenus() {
    this.subscription = this.navService.getMenuList().subscribe(data => {
      this.menus = data;
    });
}

示例响应

{
  "data": [
    {
      "label": "Services",
      "items": [
        {
          "label": "Lawn maintainance",
          "url": "/home/lawn-maintainance"
        },
        {
          "label": "Pool Cleaning",
          "url": "/home/services/pool-cleaning"
        }
      ]
    },
    {
      "label": "Contact",
      "items": [
        {
          "label": "Conatct Supplier",
          "url": "/home/contact/contact-supplier"
        },
        {
          "label": "Place Order",
          "url": "/home/contact/place-order",
          "items": [
            {
              "label": "email",
              "url": "/home/contact/contact-supplier/email"
            },
            {
              "label": "phone",
              "url": "/home/contact/contact-supplier/phoe"
            }
          ]
        }
      ]
    }
  ]
}

- Sha

Answer 1

你可以使用routerLink指令。

使用此指令为与当前路由关联的元素创建视觉上的区别。例如，以下代码在路由激活相关路由时突出显示“Bob”：

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

无论URL是'/user'还是'/user/bob'，都会将“active-link”类添加到锚标签中。如果URL发生更改，则该类将被删除。

您可以使用空格分隔的字符串或数组设置多个类。例如：

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

要仅在URL与链接完全匹配时添加类，请添加选项exact: true：

<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>

要直接检查链接的 isActive 状态，将 RouterLinkActive 实例分配给模板变量。例如，以下代码在不分配任何 CSS 类的情况下检查状态：

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

您可以将RouterLinkActive指令应用于链接元素的祖先元素。例如，当URL为“/user/jim”或“/user/bob”时，以下内容会在父标签上设置active-link类。

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

- chris burd

Answer 2

您可以使用 ngClass。

<div
[ngClass]="'active': condition === true"
>
</div>

在成功的条件下，这将分配活动类给您的 div

- mikegross