Setting content of named router-outlet in child route

Question

In my application I want to display content in two router-outlets, the primary one and a named one. If I place both outlets on the root level, I am able to set the content of the named outlet like this:

this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]);

However, I want the general layout of the application to provide a single router-outlet and be able to use a different router-outlet structure in the child routes.

If I create a child route, that also has a primary and a named outlet, I am unable to set the content of the secondary outlet. The error that is reported is:

Cannot match any routes.

The routes are defined as follows:

const appRoutes: Routes = [
  { path: '', component: RootPrimaryComponent },
  { path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' },
  {
    path: 'child', component: ChildComponent, children:
      [
        { path: '', component: ChildPrimaryComponent },
        { path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' },
      ]
  },
];
const appRouting = RouterModule.forRoot(appRoutes);

The template of app.component.html contains a primary outlet and - for testing purposes - a named secondary one:

<router-outlet></router-outlet>
<div style="border: solid 1px green">
  <router-outlet name="rootSecondary"></router-outlet>
</div>

The code above is called from a button and sets the rootSecondary outlet without any problem.

The template child.component.html defines two outlets that are placed inside of the root primary outlet:

<router-outlet></router-outlet>
<div style="border:solid 1px red">
  <router-outlet name="childSecondary"></router-outlet>
</div>

child.primary.component.html contains a button that calls the code to set the secondary outlet:

<div>
  child-primary works!
  <button (click)="setChildSecondary()">Set child secondary</button>
</div>

When clicked, the following code is run:

setChildSecondary() {
  this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }]);
}

How do I have to change the code so that the router-outlet childSecondary is filled?

Markus Markus · Accepted Answer · 2017-12-09T06:54:56

In order to solve this, I needed to set the relativeTo param to the parent of the currently active route:

export class ChildPrimaryComponent {

  constructor(private readonly router: Router,
    private readonly route: ActivatedRoute) { }

  setChildSecondary() {
    this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }],
      { relativeTo: this.route.parent });
  }
}

Setting content of named router-outlet in child route

1 Answers