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?
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 aspathMatch: 'full'
in the routes config but for routerLinkActiveHope this helps others :)