Using ActiveRouterLink directive is not working as aspected

75 Views Asked by At

This is the current router setup and it works fine. this is a lazy loaded module under the path search

so the url's become as follows... search/all search/web search/guides search/user search/books

const routes: Routes = [
  {
    path: '',
    component: GlobalSearchComponent,
    children: [
      {
        path: '',
        redirectTo: 'all'
      },
      { path: 'all', component: AllComponent },
      { path: 'web', component: WebComponent },
      { path: 'guides', component: GuidesComponent },
      { path: 'users', component: UsersComponent },
      { path: 'books', component: BooksComponent }
    ]
  }
];

Now I got a request to get rid of ´/all´ and just have the url as search so I changed it into this:

const routes: Routes = [
  {
    path: '',
    component: GlobalSearchComponent,
    children: [
      {
        path: '',
        // redirectTo: 'all' <--- removed
        component: AllComponent
        // pathMatch: 'full' <--- removing this does nothing..
      },
      //{ path: 'all', component: AllComponent },
      { path: 'web', component: WebComponent },
      { path: 'guides', component: GuidesComponent },
      { path: 'users', component: UsersComponent },
      { path: 'books', component: BooksComponent }
    ]
  }
];

and it works... except that the routerLinkActive directive is not working as I expect it to..

<nav mat-tab-nav-bar>
  <a
    *ngFor="let link of links"
    mat-tab-link
    routerLinkActive
    #rla="routerLinkActive"
    [routerLink]="[link.url]"
    [queryParams]="{ query: urlQueryParameter }"
    [active]="rla.isActive"
    >{{ link.title }}
  </a>
</nav>

rla.isActive is not working?

1

There are 1 best solutions below

0
On

After some testing I found out that it was quite simple. All that is needed is [routerLinkActiveOptions]="{ exact: true }"

Problem is that the route matches both '/' and it's children '/*'....

setting [routerLinkActiveOptions]="{ exact: true }" is the same principle as pathMatch: 'full' in the routes config but for routerLinkActive

Hope this helps others :)