CODEWITHSUNDEEP
angularroutesangular7
Richard Pariath
Richard Pariath

Reputation: 160

Implementing Multiple Child routes with named router-outlets

I'm trying to implement routes for multiple children but currently the named router-outlet seems to be working only for level-one hierarchy of children. I tried the same approach as for level-one to implement level-two but the routes show a mismatch and navigates by home.

The route module structure

  {path: '_root', component: AppComponent},
  {path: 'AfterLoginParent', component: AfterLoginRootComponent,
  children: [
    { path: '_Home', component: AfterLoginHomeComponent, outlet: 'afterRoot'},
    { path: '_MyTeam', component: MyTeamComponent, outlet: 'afterRoot',
    children: [
      { path: '_Players', component: MyTeamPlayersComponent, outlet: 'team'},
      { path: '_Status', component: MyTeamStatusComponent, outlet: 'team'},
    ]},

How I implemented level-one hierarchy

  this.router.navigate(['/AfterLoginParent', { outlets: { 'afterRoot': ['_MyTeam'] }}]);

Then in MyTeamComponent's ngOnInit()

 this.router.navigate(['/_MyTeam', { outlets: { 'team': ['_Players'] }}]);

But it does not seem to route to this level-two at all.

I'm on Angular 7

Upvotes: 0

Views: 3905

Answers (2)

Sunil
Sunil

Reputation: 11243

First of all, I don't see any case where you need to use named outlet. You made it unnecessarily complicated. As per your case, you just need to handle the nested routing. Your current configuration require little clean up, rest of things are looking fine.

Routes

const routes: Routes = [
  { path: '_root', component: AppComponent },
  {
    path: 'AfterLoginParent', component: AfterLoginRootComponent,
    children: [
      { path: '_Home', component: AfterLoginHomeComponent },
      {
        path: '_MyTeam', component: MyTeamComponent, children: [
          { path: '_Players', component: MyTeamPlayersComponent},
          { path: '_Status', component: MyteamStatusComponent},
        ]
      },
    ]
  }
];

Routing

Router link can be done relatively. ex :

<a [routerLink]="['_Home']">Home</a>
<a [routerLink]="['_MyTeam']">My Team</a>

Your modified demo is here - https://stackblitz.com/edit/angular-xyjmve

Upvotes: 3

Rahul
Rahul

Reputation: 2128

_MyTeam is the child route of AfterLoginParent so you need to append your parent/child route on - this.router.navigate(['/AfterLoginParent/_MyTeam', { outlets: { 'team': ['_Players'] }}]);

Now the angular will know the parent and reads the route correctly - everytime when you are calling a child route don't forget to map the route name with it's parent route

Hope this approach will work - please check

Happy coding !!

Upvotes: 1

Related Questions