So, my app scheme looks like this. There is a primary outlet divided into two auxiliary outlets- Sidenav outlet and Content outlet which load two different modules.
My issue is, I can't figure out how to change routing (Using routerLinks) of Sidenav outlet using Content outlet and vice versa. Also, I would like to manipulate two routes at once, which does not seem to work as well with what I tried so far.
I've tried using this
<a [routerLink]="['/home', { outlets: { 'sidenav': ['/some/route'], 'content': ['/some/other_route'] } } ]">Navigate</a>
But it does not work, I get the error as routes would not exist (Though I can set them just by editing the path at the top of the browser).
My wild guess is that [routerLink] placed inside of Content Outlet searches for child outlet named sidenav, instead of its peers. But I have no idea how to make a workaround.
EDIT: My routing file looks something like this
const routes: Routes = [
{
path: 'core',
component: CoreComponent,
children: [
{
path: 'some',
outlet: 'sidenav',
loadChildren: () =>
import('...').then(
(m) => m.Module
)
},
{
path: '',
redirectTo: 'some',
outlet: 'sidenav',
pathMatch: 'full'
},
{
path: 'some_different',
outlet: 'content',
loadChildren: () =>
import('...').then(
(m) => m.Module
)
},
{
path: '',
redirectTo: 'some_different',
outlet: 'content',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: 'core',
pathMatch: 'full'
}
];
In each child module there are just ordinary routes with nothing special.
