Can you display your child routes in the parent router-outlet?

Question

Main question: is there a way to display a child route to the parent router-outlet?

Consider this example in Angular.io guide for router.

Main Route Snippet:

  const appRoutes: Routes = [
      ...
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [AuthGuard]
      },
      {
        path: 'crisis-center',
        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
        data: { preload: true }
      },
      ....
    ];

Main Component Snippet:

@Component({
  selector: 'app-root',
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
      <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
      <a routerLink="/admin" routerLinkActive="active">Admin</a>
      ...
    </nav>
    <router-outlet></router-outlet>
  `
})

CrisisCenter Route Snippet:

const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent,
            ...
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

CrisesListComponent Snippet:

@Component({
  template: `
    <ul class="items">
      <li *ngFor="let crisis of crises$ | async"
        [class.selected]="crisis.id === selectedId">
        <a [routerLink]="[crisis.id]">
          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
        </a>
      </li>
    </ul>

    <router-outlet></router-outlet>
  `
})

CrisisDetailComponent Snippet:

@Component({
  template: `
  <div *ngIf="crisis">
    <h3>"{{ editName }}"</h3>
    ...
  </div>
  `
})

The output of this router is this:

So. What I'm trying to say is when you click on say Dragon Burning Cities, instead of displaying it under, why not just display it on the CrisesListComponent level?

All I can think of is using *ngIf like this in CrisesListComponent :

@Component({
  template: `
    <ul class="items" *ngIf="a list is selected hide this!!!">
      <li *ngFor="let crisis of crises$ | async"
        [class.selected]="crisis.id === selectedId">
        <a [routerLink]="[crisis.id]">
          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
        </a>
      </li>
    </ul>

    <router-outlet></router-outlet>
  `
})

Is there like to set the child router to this display on this parent route-outlet?

Thanks. I hope I made my question clear.

Got a good example from this thread https://stackoverflow.com/questions/42841976/angular-2-have-child-route-component-replace-parent-in-router-outlet/43646981. With the example https://stackblitz.com/edit/angular-routing-page-layout... But got an error with the directive injecting a component - for angular 6 — jedion, Jun 20 '18 at 13:48

score 0 · Answer 1 · answered Dec 10 '18 at 07:49

I think you can, by adding name to the <router-outlet> selector and add outlet property with that name to children routes. HTML:

<router-outlet name="test"></router-outlet>

CHILD ROUTES MODULE:

path: '',
component: CrisisCenterComponent,
outlet: "test"

Try that, you may face some issues with nested routes of this child.

Can you display your child routes in the parent router-outlet?

1 Answers1