typescript - Hur man listar/skriver ut alla rutter i @Routes i min Angular2-app

Jag har en snabb fråga. Jag kollar just nu på https://angular.io/docs/ts/latest/api/router/Router-class.html men jag undrar, i mitt Angular2 main.ts har jag definierat mina rutter på följande sätt:

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

Nu i en komponent någon annanstans importerar jag Router-klassen. I min komponent (eller komponentmallen) vill jag loopa igenom alla mina definierade rutter eller bara kunna få åtkomst till dem. Finns det ett inbyggt sätt att göra detta? Som någon funktion som returnerar en objektarray? Här är en grov idé om vad jag vill...

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

Svar #1

Uppdatering juli 2024: Eftersom detta svar skrevs för länge sedan, har jag inte hunnit med alla nyare versioner. Det finns ett tillägg till detta svar av Adrian för nyare versioner med lazy-loading. Vänligen hänvisa till det också för nyare versioner av Angular.

Här är en bättre version som kommer att lista alla möjliga rutter (fixad enligt kommentarer):

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++) {
    const route = config[i];
    console.log(parent + '/' + route.path);
    if (route.children) {
      const currentPath = route.path ? `${parent}/${route.path}` : parent;
      this.printpath(currentPath, route.children);
    }
  }
}

Svar #2

Tydligen finns det ett mycket kompakt sätt att göra det:

constructor(private router: Router) {}

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

Svar #3

Om du bara behöver ruttvägarna som strängar kan du hitta dem genom att iterera över ditt Router-objekts config-array.

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

Svar #4

Jag använder denna komponente för att få alla rutter i Angular 9

import { Compiler, Component, Injector, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';

@Component({
  templateUrl: './sitemap.component.html'
})
export class SiteMapComponent implements OnInit {

  public urls: string[] = [];
  constructor(private _router: Router, private compiler: Compiler, private injector: Injector) {

  }

  ngOnInit() {
    this._router.config.forEach(i => {
      this.getPaths(i);
    })
  }

  getPaths(route: Route, parent: string = '') {
    if (route.redirectTo) {
      return;
    }
    if (route.children) {
      route.children.forEach(i => {
        this.getPaths(i, parent + route.path);
      });
    }
    else if (route.loadChildren) {
      (<any>this._router).configLoader.load(this.injector, route).subscribe(i => {
        i.routes.forEach(j => {
          this.getPaths(j, parent + route.path)
        });
      });
    }
    else if (route.path != null) {
      this.setPath(route.path, parent);
    }
  }
  setPath(path, parent) {
    let fullPath: string;
    if (path != null) {
      if (parent) {
        fullPath = `/${parent}/${path}`;
      }
      else {
        fullPath = `/${path}`
      }
    }
    this.urls.push(fullPath)
  }
}

Uppdatera Angular 14: configLoader.load

(<any>this._router).configLoader.loadChildren

Uppdatera Angular 17: configLoader.loadChildren

(<any>this._router).navigationTransitions.configLoader.loadChildren