Dynamic Router Name

Question

Is it possible to dynamically set the router name in angular 2? I need to create a generic component containing a router output.

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 and name are components of @inputs

Answer 1

As far as I know, this works over time

 <router-outlet [name]="propertyWithOutletName"></router-outlet> 

Strike>

There was an attempt to execute it, but it was not completed.

https://github.com/angular/angular/pull/12550

Answer 2

This is so frustrating. I really want us to get a real solution. Here is my terrible hack that works in this case, because I have only three outputs: a, b and c. My use case is that I have three panels with additional URLs and child routes. My "solution" would fall if I ever had a system where there was an arbitrary number of named outputs, or if the names of the router's socket could change dynamically.

What can we do to get into angular to fix this error?

 @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) {} }