Dynamically set router-outlet name

Question

Is it possible to dynamically set the name of a router-outlet in angular 2? I need to create a generic component that contains a router-outlet.

Template example :

<nav class="nav menu">
    <a *ngFor="let navRoute of navigationRoutes" class="nav-link" [class.selected]="navRoute.isActive" (click)="onActivated(navRoute.route)">{{navRoute.header}}</a>
</nav>
<router-outlet name=[[DO SOME BINDING HERE]]></router-outlet>

navigationRoutes & name are component @inputs

Answer 1

This is so frustrating. I really wish we could get a real solution. Here is my horrible hack, which works in this case because I only have three outlets: a, b, and c. My use case is that I have a three panel system with auxiliary urls and child routes. My "solution" would fall flat if I ever had a system where there was an arbitrary number of named outlets, or if the router outlet names could change dynamically.

What can we do to get on angular's case to get this fixed?

@Component({
  selector: 'my-router-outlet',
  template: `
    <router-outlet 
      *ngIf="route.outlet === 'a'"
      name="a"
    ></router-outlet>
    <router-outlet 
      *ngIf="route.outlet === 'b'"
      name="b"
    ></router-outlet>
    <router-outlet 
      *ngIf="route.outlet === 'c'"
      name="c"
    ></router-outlet>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RouterOutletComponent {
  constructor(public route: ActivatedRoute) {}
}