angular 5 multiple router-outlets on a nested page

Question

The problem is a combination of nested router-outlets, which I have working, with having multiple router-outlets on the child page. For simplicity, I have one Home page with a "Login" link

<h3>HOME COMPONENT (Splash Page)</h3>
<a [routerLink]="['/activeRoot']">Login</a>

Login then goes to: Active.Module. This is like a main page that can have many areas (router-outlets), each doing different things (Components). Active.html:

<h3>ACTIVE COMPONENT - main overwrites Splash</h3>
<div [ngStyle]="{'display': 'flex', 'flex-direction': 'row'}">
  <div [ngStyle]="{'border': '1px solid green', 'margin': '20px'}">
    <ul>
      <li>
        <a routerLink='/home'>Home</a>
      </li>
      <li>
        <a routerLink='/activeRoot'>Active Root</a>
      </li>
      <li>
        <a routerLink='ProjectMgmt'>Project Management</a>
      </li>
      <li>
        <a routerLink='Execution'>Execution</a>
      </li>
      <li>
        <a routerLink="[ 'ProjectMgmt', {outlets: {'secondaryOutlet': ['Secondary']}]">SECONDARY</a>
      </li>
    </ul>
  </div>
  <div [ngStyle]="{'border': '1px solid maroon', 'min-width': '500px', 'height': '80px', 'margin': '20px', 'padding': '20px' }">
    <router-outlet></router-outlet>
  </div>
  <div [ngStyle]="{'border': '1px solid maroon', 'min-width': '500px', 'height': '80px', 'margin': '20px', 'padding': '20px' }">
    <router-outlet name="secondaryOutlet"></router-outlet>
  </div>
</div>

In the browser, it looks like this:

Home -> Login "splash page" Active Root -> what is supposed to be the main page Project Management displays in the unnamed router outlet Execution displays in the unnamed router outlet SECONDARY is the problem... it does NOT display in the named outlet.

The app-routing.module has the routes defined as:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'activeRoot', component: ActiveComponent, children: [
    {path: 'ProjectMgmt', component: ProjectMgmtComponent},
    {path: 'Execution', component: ExecutionComponent },
    {path: 'Secondary', component: SecondaryComponent, outlet: 'secondaryOutlet' }
  ]},
  {path: '**', component: InvalidPageComponent}
];

When I click the SECONDARY link, the route ends up taking the InvalidPageComponent path.

The only requirements when I turn this into a real application:

a) some number of parent pages whose content appears in the "global" application router-outlet (as needed of course).

b) one sample of these pages (like Active) has 'normal' content like the left green box.

c) some regions of the page (unnamed and named router outlets) contain content from other child components specific to that page.

I think I've tried every site and plunker on the planet, but...no luck. I appreciate your help. Thanks in advance.

Yogi

score 3 · Answer 1 · answered Dec 15 '17 at 23:13

Okay, I figured it out. A little clumsey, but: in a real application this would be better done by using buttons rather than anchors (or at least going to a function when the selection was clicked). I say this because in reality I would have to assemble the url as a string and then navigate to it.

First, add specific outlets to each child in the route, like this:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'activeRoot', component: ActiveComponent, children: [
    {path: 'ProjectMgmt', component: ProjectMgmtComponent, outlet: 'primaryOutlet'},
    {path: 'Execution', component: ExecutionComponent, outlet: 'primaryOutlet' },
    {path: 'Secondary', component: SecondaryComponent, outlet: 'secondaryOutlet' }
  ]},
  {path: '**', component: InvalidPageComponent}
];

In my anchors, changing the two for Project Management and Execution to:

  <li>
    <a [routerLink]="['/activeRoot', { outlets: { 'primaryOutlet': ['ProjectMgmt'], 'secondaryOutlet': ['Secondary']}}]">Project Management</a>
  </li>
  <li>
    <a [routerLink]="['/activeRoot', { outlets: { 'primaryOutlet': ['Execution'], 'secondaryOutlet': ['Secondary']}}]">Execution</a>
  </li>

This properly fills each outlet however as you can see, being able to select new components for either the left or right outlets will mean the path to navigate has to be computed.

angular 5 multiple router-outlets on a nested page

1 Answers1