Angular2 c'è un modo per ottenere un elenco di percorsi dal router?

Question

Quello che mi piacerebbe fare è costruire dinamicamente la mia navigazione iterando attraverso un elenco di percorsi configurati in Angular2. Non riesco a trovare da nessuna parte nel router dove posso accedere ai percorsi configurati. Qualcuno ha provato qualcosa del genere?

Ho esaminato la proprietà di registry ma non sembra che abbia nulla di utile.

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES], 
    template: ` 
     <h1>Routing Example</h1> 
     <div> 
      <div> 
       <b>Main menu: </b> 
       <a [router-link]="['Home']">Home</a> | 
       <a [router-link]="['One']">One</a> | 
       <a [router-link]="['Two']">Two</a> 

       <!-- 
        // I would rather do something like this: 
        <a *ng-for="#route of router.routes" [router-link]="['route.name']">{{ route.name }}</a> 
       --> 

      </div> 
      <div> 
       <router-outlet></router-outlet> 
      </div> 
     </div> 
    ` 
}) 
@RouteConfig([ 
    { path: '/', redirectTo: '/home' }, 
    { path: '/home', as: 'Home', component: Main }, 
    { path: '/one', as: 'One', component: One }, 
    { path: '/two', as: 'Two', component: Two }, 
]) 
export class MyApp { 
    constructor(public location: Location, public router: Router){ 
    } 
} 

Answer 1

Avevo anche bisogno di generare dinamicamente i collegamenti. A quanto ho capito, il problema è che il router non ha metodi per generare collegamenti, ma poi li inserisce manualmente in [router-link]. Eppure ... but they plan to add them. C'è il lot of features in coda per il router, si spera che li aggiunga presto (;

Per ora ho fatto questo lavoro - ho messo routerConfig fuori dal decoratore, quindi posso usarlo in questo componente (e possibilmente altri se lo esporto) :

let routeConfig = [ 
    { path: '/', name: 'Intro', component: IntroRouteComponent, useAsDefault: true }, 
    ... 
    { path: '/projects', name: 'Projects', component: ProjectsRouteComponent }, 
    { path: '/about', name: 'About', component: AboutRouteComponent }, 
]; 

@Component({ 
    directives: [ROUTER_DIRECTIVES], 
    providers: [], 
    selector: 'app', 
    template: ` 
    <a (click)="back()" *ngIf="prevRoute">{{ prevRoute }}</a> 
    <a (click)="forward()" *ngIf="nextRoute">{{ nextRoute }}</a> 
    `, 
}) 
@RouteConfig(routeConfig) 
export class AppComponent { 
    private nextRoute: any; 
    private prevRoute: any; 

    constructor(private _router: Router) { 
    this._router.subscribe(route => { 
     let i = routeConfig.findIndex(r => r.path === ('/' + route)); 
     this.prevRoute = routeConfig[i - 1] ? routeConfig[i - 1].name : false; 
     this.nextRoute = routeConfig[i + 1] ? routeConfig[i + 1].name : false; 
    }); 
    } 

    back() { 
    this._router.navigate(Array(this.prevRoute)); 
    } 
    forward(): any { 
    this._router.navigate(Array(this.nextRoute)); 
    } 

}