时间戳

首页 > 解决方案 > 根据 Angular 中的 URL 设置菜单处于活动状态

javascript - 根据 Angular 中的 URL 设置菜单处于活动状态

问题描述

我正在开发一个带有顶部菜单的角度应用程序，我需要根据 url 将菜单设置为活动状态。这是我尝试过的。

网址示例

http://localhost:4200/home/about - 关于应该突出显示

http://localhost:4200/home/service/supply - 应该突出显示服务

http://localhost:4200/home/contact/details- 应突出显示联系人

    if (event instanceof NavigationStart) {
      this.currentMenu = this.elem.nativeElement.querySelectorAll('.nav-link'); 
      for (let i = 0; i < this.currentMenu.length; i++) {
        if(event.url.indexOf('/about') > -1){
          if(this.currentMenu[i].innerHTML == "About"){
            this.currentMenu[i].style.color  = "red";
          } 
        } else if (event.url.indexOf('/service') > -1){
          if(this.currentMenu[i].innerHTML == "Service"){
            this.currentMenu[i].style.color  = "red";
          } 
        }
        else if (event.url.indexOf('/contact') > -1){
            if(this.currentMenu[i].innerHTML == "Contact"){
              this.currentMenu[i].style.color  = "red";
            } 
          }
      }
    }
  })

我不确定这是否是实现这一目标的正确方法。任何投入将不胜感激

标签： javascriptangularmenu

解决方案

无需做您已经完成的很长的路要走，因为Angular Library它为此提供了一个简单而有效的解决方案。

既然您说您正在处理Menu选项，请在此处使用 routerLinkActive和routerLinkActiveOptions指令如下：-

选项1：

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

选项 2：

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

选项 3：

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

根据您的要求使用。更多细节可以在这里找到：https ://angular.io/api/router/RouterLinkActive#routerlinkactive

推荐阅读