CODEWITHSUNDEEP
angularangular-router
Enima
Enima

Reputation: 392

How to use an auxiliary route inside another auxiliary route?

I have a problem on which I didn't found any documentation. It is about the routers. I have something which look like this schematically : 

<router-outlet> <!-- Primary router-->
     <app-main> <!-- Top-level component-->
       <router-outlet name="projects"> <!-- Auxiliary router-->
         <app-projects>
           <router-outlet name="steps">
             <app-steps></steps>
           </router-outlet> 
         </app-projects>
        </router-outlet>
     </app-main>
</router-outlet>

My routes look like this : 

{path: '', redirectTo: 'home', pathMatch: 'full'},
 {
   path: 'home', component: MainComponent, children:
     [
       {path: 'all', component: ProjetsComponent, outlet: 'projects' children:[
           {path: 'all', component: EtapesComponent, outlet: 'steps'}
      ]}
  ]
},

If i want to navigate inside the router-outlet named "projects", I just have to do that : 

 this.router.navigate(['/home', {outlets: {'projects': 'all'}}]);

My question is : how to navigate inside the router-outlet named step ? I can't find the semantic anywhere. Thank you for your help.

Upvotes: 1

Views: 1060

Answers (1)

rrd
rrd

Reputation: 5957

There are several options:

this.router.navigate(['/home', { outlets: { 'primary': ['all'], 'steps': ['somewhere'] } } ]);

So in the above example you are moving two outlets, primary and steps.

You can also do the same with links:

<a [routerLink]="['/home', { outlets: { 'primary': ['all'], 'steps': ['somewhere'] } } ]">Link Name</a>

I ran into lots of problems with multiple outlets though, so you may need to experiment a little to get it right for the structure you have in your routing file. I was using lazy loading for example, although the same tree-like structure you have.

If you do have issues, there is another option, via the component and a method call from a click event etc:

navThere(): void {
  this.router.navigate(['/home']).then(nav => {
    this.router.navigate(['', { outlets: { primary: ['all'], 'steps': ['somewhere'] } }]);
  });
}

Upvotes: 2

Related Questions