Comment lister / sortir tous les itinéraires dans @Routes dans mon application Angular2

Question

J'ai une question rapide. Je suis actuellement à la recherche par le biais de https://angular.io/docs/ts/latest/api/router/Router-class.html mais je me demandais, dans mon Angular2 de l' main.ts j'ai mes itinéraires ainsi défini:

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

Maintenant dans un composant ailleurs j'ai importer le Routeur de classe. Dans mon composant (ou le modèle de composant) je voudrais faire une boucle sur tous mes itinéraires définis ou tout simplement être en mesure d'y accéder. Est-il intégré dans la façon de le faire? Comme une fonction qui retourne un tableau d'objets? Ici n'est qu'une grossière idée de ce que je veux...

@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

Voici une meilleure version qui listera tous les itinéraires possibles:

   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 2

Apparemment, il existe un moyen très compact de le faire:

 constructor(private router: Router) {}

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

Answer 3

Si vous n'avez besoin que des chemins de route en tant que chaînes, vous pouvez les trouver en itérant sur votre Router objet config .

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

Answer 4

Pour la version @angular 2.00, j'ai pu trouver une liste des enfants via la propriété routeConfig.

Voici un exemple de mon composant. Remarque, j'accède aux enfants via la propriété «parent» car le composant est en fait l'un des enfants car je le rend dans la sortie du routeur enfant.

 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 5

si vous souhaitez consulter l'itinéraire disponible en important dans un composant.

attribuer vos itinéraires à une constante comme ci-dessous

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

export const rout = RouterModule.forRoot (appRoutes);

ici vous pourrez exporter les routes

importer le routage const

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

c'est juste pour trouver les itinéraires disponibles. déconseillé de mettre en œuvre une logique basée sur cette