Wie alle Routen in @Routes in meiner Angular2 App aufgelistet/ausgegeben werden

Question

Ich habe eine kurze Frage. Ich bin derzeit auf der Suche durch https://angular.io/docs/ts/latest/api/router/Router-class.html aber ich frage mich, in meinem Angular2 des main.ts Ich habe meine Routen so definiert:

@Routes([ 
    { path: '/', component: HomeComponent }, 
    { path: '/about-me', component: AboutMeComponent }, 
    { path: '/food', component: FoodComponent }, 
    { path: '/photos', component: PhotosComponent }, 
    { path: '/technology', component: TechnologyComponent }, 
    { path: '/blog', component:Blogomponent }, 
]) 

nun in einer Komponente an anderer Stelle importiere ich die Router-Klasse. In meiner Komponente (oder der Komponentenvorlage) möchte ich alle definierten Routen durchlaufen oder einfach darauf zugreifen können. Gibt es einen eingebauten Weg, dies zu tun? Wie eine Funktion, die ein Objekt-Array zurückgibt? Hier ist eine grobe Vorstellung davon, was ich will ...

@Component({ 
    selector: 'ms-navigation', 
    templateUrl: 'src/navigation/navigation.template.html', 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

export class NavigationComponent { 
    constructor(private router:Router) { 
     // what can I do here to get an array of all my routes? 
     console.log(router.routes); ???? 
    } 
} 

Answer 1

wenn man sich die verfügbare Route suchen möchten, indem sie in einer Komponente zu importieren.

Ihre Routen zu einem konstanten zuweisen wie unter

const appRoutes: Routes = [ 
    { 
     path: 'asd', 
     component: asdComponent 
    }, 
    { 
     path: 'ar', 
     component: arComponent 
    } 
]; 

Export const Routing = RouterModule.forRoot (appRoutes);

hier können Sie die Routen

Import der const Routing

import { routing }  from './app.routing'; 
export class AppComponent { 
    route=routing; 
    /// route.providers is an array which internally contains the list of routes provided 
    console.log(route.providers); 
} 

dies nur die verfügbaren Routen zu finden, ist exportieren. nicht empfehlenswert Logik zu implementieren, basierend auf dieser

Answer 2

Wenn Sie nur die Route Pfade als Strings benötigen, können Sie sie durch Iterieren über Ihre Routerconfig Array Objekt finden.

for (var i = 0; i < this.router.config.length; i++) { 
     var routePath:string = this.router.config[i].path; 
     console.log(routePath); 
    } 

Answer 3

Für @ angular Version 2.00 konnte ich eine Liste der untergeordneten Elemente über die routeConfig-Eigenschaft finden.

Hier ist ein Beispiel für meine Komponente. Hinweis: Ich greife über die Eigenschaft 'parent' auf die untergeordneten Elemente zu, da es sich bei der Komponente tatsächlich um eines der untergeordneten Elemente handelt, da ich es im untergeordneten Router-output rendere.

import { Component } from '@angular/core'; 
import {Route, ActivatedRoute, Router} from "@angular/router"; 

@Component({ 
    selector: 'list', 
    template: require('./list.component.html') 
}) 
export class ListComponent { 
    children = new Array<RouteLink>(); 

    constructor(private router: Router, private activatedRoute: ActivatedRoute) { 
     for (let child of activatedRoute.parent.routeConfig.children) { 
      if (child.path && child.data["breadcrumb"]) { 
       this.children.push(new RouteLink(child.path, child.data["breadcrumb"])); 
      } 
     } 
    } 
} 

export class RouteLink { 
    constructor(private path: string, private name: string) { } 
} 

Answer 4

Hier ist eine bessere Version, die alle möglich Routen auflistet:

import { Router, Route } from "@angular/router"; 
    constructor(private router: Router) { 

    } 
    ngOnInit() { 
    this.printpath('', this.router.config); 
    } 
    printpath(parent: String, config: Route[]) { 
    for (let i = 0; i < config.length; i++) { 
     let r = config[i]; 
     console.log(parent + '/' + r.path); 
     if (r.children && r.path) { 
     this.printpath(parent + '/' + r.path, r.children); 
     } 
    } 
    } 

Answer 5

Anscheinend gibt es eine sehr kompakte Art und Weise, es zu tun:

constructor(private router: Router) {} 

ngOnInit() { 
    console.log('configured routes: ', this.router.config); 
}