У меня есть эта панель навигации:

 <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>
0
Luke_C 8 Июн 2021 в 10:43

2 ответа

Лучший ответ

Вот как вы должны использовать модуль маршрутизатора, вы можете передать любое количество классов в routerLinkActive. Дополнительную информацию можно найти здесь.

 <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;
          }
   }
  }
0
Apoorva Chikara 8 Июн 2021 в 11:04

Вы можете использовать свойство routerLinkActive напрямую вместе с routerLink.

<a routerLink="textArea" [routerLinkActive]="['myClass']">text-area</a>
<a routerLink="dropdown" [routerLinkActive]="['myClass']">dropdown</a>
0
Johna 8 Июн 2021 в 08:08