根据 Angular 中的 URL 设置菜单激活

Question

我正在开发带有顶部菜单的 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";
            } 
          }
      }
    }
  })

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

Answer 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