I have root
routing defined as
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'module1', loadChildren: './module1/module1.module#Module1Module'},
{path: '**', redirectTo: ''}
];
the module1.routing.ts
has:
{
path: '',
component: SubModule1Component,
children: [
{ path: 'mod1child1', component: SubMod1Child1Component },
{
path: 'mod1child2',
component: SubMod1Child2Component,
children: [
{ path: '', component: Outlet1Component, outlet: 'outlet1' },
{ path: 'newout1', component: Outlet1NewComponent, outlet: 'outlet1' },
{
path: '',
component: Outlet2Component,
outlet: 'outlet2',
children: [
{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}
],
},
],
},
],
canActivate: [AuthGuardService],
},
];
This code works when I navigate to /module1/mod1child2
as below:
My HTML page for above image is:
<h1>Child 2</h1>
<button [routerLink]="[{outlets: {'outlet1': ['newout1']}}]">Change Outlet 1</button>
<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>
<div style="display: flex;">
<div style="display: grid ;border: 1px solid red; width: 50%;height: 100px;float:left">
<router-outlet name="outlet1"></router-outlet>
</div>
<div style="display: grid ;border: 1px solid green; width: 50%;height: 100px;float:left">
<router-outlet name="outlet2"></router-outlet>
</div>
</div>
I am unable to load
{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}
by clicking on :
<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>
What am I doing wrong. I tried
<button [routerLink]="['/module1/mod1child2',{outlets: {'outlet2': ['childoutlet2']}}]">
Change Outlet 2
</button>`
but this doesn't seem to work as well
from Accessing children in auxiliary routing : Angular
No comments:
Post a Comment