Friday, 24 May 2019

Accessing children in auxiliary routing : Angular

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:

enter image description here

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