typescript - redireccionar - rutas angular 6

Cómo listar/generar todas las rutas en @Routes en mi aplicación Angular2

Question

Tengo una pregunta rápida. Actualmente estoy buscando en https://angular.io/docs/ts/latest/api/router/Router-class.html pero me preguntaba, en main.ts de mi Angular2 tengo mis rutas definidas así:

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

Ahora en un componente en otro lugar importo la clase Router. En mi componente (o la plantilla del componente) me gustaría recorrer todas mis rutas definidas o simplemente poder acceder a ellas. ¿Hay una forma incorporada para hacer esto? ¿Como alguna función que devuelve una matriz de objetos? Aquí hay una idea cruda de lo que quiero ...

@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

Aparentemente hay una forma muy compacta de hacerlo:

constructor(private router: Router) {}

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

Answer 2

Aquí hay una mejor versión que listará todas las rutas posibles:

  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 3

Para @angular versión 2.00 pude encontrar una lista de los hijos a través de la propiedad routeConfig.

Aquí hay un ejemplo de mi componente. Tenga en cuenta que estoy accediendo a los hijos a través de la propiedad ''padre'', ya que el componente es en realidad uno de los hijos, ya que lo estoy mostrando en la salida del enrutador hijo.

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

Se encuentra con problemas al usar esta solución si tiene rutas perezosas. Hice un simple comando de bash para mostrar la información de enrutamiento:

cd /path/to/app 
for r in $(find src -name "*.routes.ts"); do 
  echo $r; grep "path:/|component:/|loadChildren:" $r; 
done

Answer 5

Si solo necesita las rutas de ruta como cadenas, puede encontrarlas iterando sobre la matriz de config su objeto Router .

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

Answer 6

si desea ver la ruta disponible importando a un componente.

Asigna tus rutas a una constante como la de abajo.

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

exportar ruta de enrutamiento = RouterModule.forRoot (appRoutes);

Aquí podrás exportar las rutas.

importar el enrutamiento 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);
}

esto es solo para encontrar las rutas disponibles. No es recomendable implementar la lógica basada en esto.