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

【问题标题】：Setting the menu active based on the URL in Angular根据 Angular 中的 URL 设置菜单处于活动状态
【发布时间】：2021-06-04 21:52:39
【问题描述】：

我正在开发一个带有顶部菜单的 Angular 应用程序，我需要根据 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";
            } 
          }
      }
    }
  })

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

【问题讨论】：

这应该有助于stackoverflow.com/q/29696210/1128441

标签： javascript angular menu

【解决方案1】：

您无需像以往那样费力，因为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

【讨论】：