Question

我有这个导航栏：

 <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>

Answer 1

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

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

Answer 2

这就是你应该如何使用路由器模块，你可以在 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;
          }
   }
  }

取当前路线的名称/路径

2 个答案: