Jak wyświetlić/wyświetlić wszystkie trasy w @Routes w mojej aplikacji Angular2

Question

Mam krótkie pytanie. Jestem obecnie patrząc przez https://angular.io/docs/ts/latest/api/router/Router-class.html ale zastanawiałem się, w moim Angular2 na main.ts mam moje trasy zdefiniowane w następujący sposób:

@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 }, 
]) 

Teraz w komponencie gdzie indziej mogę zaimportować klasę routera. W moim komponencie (lub szablonie komponentu) chciałbym przechodzić przez wszystkie zdefiniowane trasy lub po prostu mieć do nich dostęp. Czy jest to wbudowane w taki sposób? Podobnie jak niektóre funkcje zwracające tablicę obiektów? Oto prymitywny pomysł na to, czego chcę ...

@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

Jeśli chcesz zobaczyć dostępną trasę, importując ją do komponentu.

przypisać swoje trasy do stałej jak poniżej

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

const eksport routing = RouterModule.forRoot (appRoutes);

tutaj będzie można eksportować trasy

zaimportować const routingu

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); 
} 

to tylko, aby znaleźć dostępne trasy. nie zalecane do wdrożenia logiki na podstawie tego

Answer 2

Jeśli trzeba tylko ścieżki trasy, jak ciągi, można znaleźć je przez iteracji nad config tablicy Twojego Router obiektu.

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

Answer 3

Dla wersji prostokątnej 2,00 udało mi się znaleźć listę dzieci za pośrednictwem właściwości routeConfig.

Oto przykład mojego komponentu. Uwaga: Uzyskuję dostęp do dzieci za pośrednictwem właściwości "rodzica", ponieważ składnik jest faktycznie jednym z elementów podrzędnych podczas renderowania go w gniazdku podrzędnym routera.

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

Oto lepsza wersja, która będzie lista wszystkie możliwe trasy:

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

Podobno jest bardzo zwarty sposób to zrobić:

constructor(private router: Router) {} 

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