文章/答案/技术大牛

发布

问使菜单在角度上活动
EN

Stack Overflow用户

提问于 2021-06-17 17:39:26

回答 2查看 2K关注 0票数 1

在我的应用程序中，我有一个带有菜单项的标题。我从服务中检索菜单列表，并在标题中显示相同的菜单列表。在主列表的悬停中，我将显示子菜单。单击其子项并导航到其子项页(子项可以处于多个级别)，我希望使父项处于活动状态。我希望用户被告知他们在哪个页面下。

<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

回答 2

Stack Overflow用户

发布于 2021-06-17 18:15:38

您可以使用routerLink

使用此指令可为与活动路由关联的元素创建可视区别。例如，当路由器激活相关路由时，下面的代码突出显示单词"Bob“：

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

每当URL为'/user‘或'/user/bob’时，“活动链接”类就会添加到锚标记中。如果URL更改，类将被删除。

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

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

若要仅在URL与链接完全匹配时添加类，请添加以下选项: 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>

票数 4

Stack Overflow用户

发布于 2021-06-17 18:14:43

您可以使用ngClass。

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68024148

复制

相似问题

问使菜单在角度上活动
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使菜单在角度上活动EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使菜单在角度上活动
EN