取当前路线的名称/路径答案

【问题标题】：take the name/path of the current route取当前路线的名称/路径
【发布时间】：2021-06-08 07:43:13
【问题描述】：

我有这个导航栏：

 <nav class="menu">
   <a routerLink="textArea" class="menu-item">text-area</a>
   <a routerLink="dropdown" class="menu-item">dropdown</a>
   <a routerLink="autosuggest" class="menu-item">autosuggest</a>
   <a routerLink="manageCookies" class="menu-item">manage-cookies</a>
   <a routerLink="progressBar" class="menu-item">progress-bar</a>
 </nav>
 <router-outlet></router-outlet>

以及app.routing中声明的路由：

 const routes: Routes = [
   {
     path: 'textArea',
     component: TextAreaComponent,
   },
   {
     path: 'dropdown',
     component: DropdownComponent,
   },
   {
    path: 'autosuggest',
    component: AutosuggestComponent,
   },
   {
     path: 'manageCookies',
     component: ManageCookiesComponent,
   },
   {
     path: 'progressBar',
     component: ProgressBarComponent,
   },
 ];

如果我点击的路径是progressBar，我想为导航栏应用一个类……我该怎么办？为了清楚起见，我会做这样的事情：

 <nav class="menu" [class.myClass]="currentRoute === 'progressBar'">
   .......
 </nav>

【问题讨论】：

标签： angular typescript routes navbar

【解决方案1】：

这就是你应该如何使用路由器模块，你可以在 routerLinkActive 中传递任意数量的类。您可以查看here了解更多详情。

 <nav class="menu">
   <a routerLink="textArea" [routerLinkActive]="['is-active', 'class 1']" class="menu-item">text-area</a>
   <a routerLink="dropdown" [routerLinkActive]="['is-active']" class="menu-item">dropdown</a>
   <a routerLink="autosuggest" [routerLinkActive]="['is-active']" class="menu-item">autosuggest</a>
   <a routerLink="manageCookies" [routerLinkActive]="['is-active']" class="menu-item">manage-cookies</a>
   <a routerLink="progressBar" [routerLinkActive]="['is-active']" class="menu-item">progress-bar</a>
 </nav>

如果你想动态地做，你可以这样做：

 <nav class="menu" [ngClass]="urlBased">
   .......
 </nav>

在您的 Ts 文件中添加一个方法以根据激活的路由填充 urlBased：

// Sample code to follow
 constructor(private router: Router) {
          router.events.subscribe((url:any) => { 
          console.log(url)); // url will be the path or use this.router.url
          //this.urlBased = this.router.url;
          this.urlBased = url;
           if(this.urlBased && this.urlBased.length > 0){
            this.urlBased = this.urlBased.slice(1);
            if (this.urlBased == 'progressBar') this.urlBased = progressBar;
          }
   }
  }

【讨论】：

但是我想把课程放在
，不放在
route.url 告诉我它不存在！
更新了答案，检查url路径并与之匹配。如果您有多个动态类，您也可以创建一个开关。

【解决方案2】：

您可以直接将routerLinkActive 属性与routerLink 一起使用。

<a routerLink="textArea" [routerLinkActive]="['myClass']">text-area</a>
<a routerLink="dropdown" [routerLinkActive]="['myClass']">dropdown</a>

【讨论】：

但是我想把课程放在
，不放在