-1

So I have read some articles on the subject, without found an answer.

USE CASES

  • If the app is launch on the /tools route, it's working. Then I switch to /audio, it's working.
  • If the app is launch on the /audio route, it's working. Then I switch to /tools, it's NOT working. The active item is still 'Audio' and I don't know why.

PROBLEM

The active class is not added to the good item.

app.routing.ts

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'tools', pathMatch: 'full' },
      { path: 'tools', component: ToolsComponent },
      {
        path: 'audio',
        loadChildren: () => import('./audio/audio.module').then(m => m.AudioModule)
      },
    ]
  }
];

audio.module :

@NgModule({
  declarations: [AudioComponent, AudioDetailsComponent],
  imports: [SharedModule, AudioRoutingModule],
})

audio.routing.ts :

const routes: Routes = [
  { path: '', component: AudioComponent },
  { path: ':id', component: AudioDetailsComponent }
];

menu.component.html (which is in HomeComponent) :

<mat-nav-list fxLayout="column">
  <a mat-list-item [routerLink]="['/tools']" routerLinkActive="active">
    <span mat-line>Tools</span>
    <mat-icon matListIcon>build</mat-icon>
  </a>
  <a mat-list-item [routerLink]="['/audio']" routerLinkActive="active">
    <span mat-line>Audio</span>
    <mat-icon matListIcon>headset</mat-icon>
  </a>
</mat-nav-list>
Emilien
  • 2,701
  • 4
  • 15
  • 25
  • no need of brackets in case of static binding `[routerLink]="['/audio']"`, any error in console? – Pardeep Jain Sep 14 '20 at 12:30
  • I tried with and without. No changes. But thanks ! No error in console neither :/ – Emilien Sep 14 '20 at 12:31
  • 1
    try debugging the routing transaction using `enableTracing` for more information refer here https://angular.io/api/router/ExtraOptions – Pardeep Jain Sep 14 '20 at 12:38
  • When I click on `/tools`, I have a NavigationCancel event with the error `Navigation ID 3 is not equal to the current navigation id 4` – Emilien Sep 14 '20 at 12:53

1 Answers1

0

I found the "Why" it's not working : In audio.component.ts, I call router.navigate in quick succession. This answer solved my issue

I juste have to reformat my code.

Emilien
  • 2,701
  • 4
  • 15
  • 25