使菜单以角度激活答案

【问题标题】：Make menu active in angular使菜单以角度激活
【发布时间】：2021-09-02 12:59:23
【问题描述】：

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

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

【问题讨论】：

标签： javascript html angular angular2-routing

【解决方案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' 时，以下设置父标记上的活动链接类。

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

【讨论】：

【解决方案2】：

你可以使用 ngClass。

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

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

【讨论】：