javascript - 使菜单处于事件状态

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"
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

你可以使用 routerLink

使用此指令为与事件路由关联的元素创建视觉区别。例如，当路由器激活关联路由时，以下代码突出显示单词“Bob”:

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

只要 URL 是“/user”或“/user/bob”，“active-link”类就会添加到 anchor 标记中。如果 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”时，以下设置父标记上的事件链接类。

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