pasar - Enrutador Angular2, obtenga datos de ruta de url, para mostrar las migas de pan

pasar parametros por url angular 4

Question

Estoy usando el enrutador angular2 .

Para dibujar el rastro de una url, digamos site.com/a/b/c/15. Hago lo siguiente:

1. Obtenga la ruta de site.com/a/b/c/15 y obtenga el bonito nombre asociado a la ruta
2. Obtenga la ruta de site.com/a/b/c y obtenga el bonito nombre asociado a la ruta
3. Obtenga la ruta de site.com/a/b y obtenga el bonito nombre asociado a la ruta
4. Obtenga la ruta de site.com/a y obtenga el bonito nombre asociado a la ruta

Entonces digamos que tengo las siguientes rutas:

{ path: ''a'', component: A, data:{prettyName: ''I am A''}}
{ path: ''b'', component: B, data:{prettyName: ''I am B''}},
{ path: ''c'', component: C, data:{prettyName: ''I am C''}},

El resultado de mi proceso sería una matriz que contiene {"I am C", "I am B", "I am C"} y gracias a eso puedo mostrar un bonito breadcrumb "I am A > I am B > I am C" que explica la ruta actual.

Este uso para trabajar con el enrutador, obsoleto

this.router.recognize(url).then((instruction) => {
    instruction.component.routeData.get(''prettyName'') // Would return ''I am ..''

Sin embargo ahora; con el último enrutador ya no puedo procesar esta lógica de reconocimiento.

¿Cómo obtener los datos de ruta asociados a una url?

Answer 1

Hasta ahora, la solución más factible es (hecho):

• Hacer que las rutas sean exportables / importables
• Obtenga la actualización de URL actual de enrutador.eventos suscribirse
• En el cambio de URL, haz un bucle en la ruta de las rutas, mira si el patrón coincide con la URL
• Si el patrón coincide con la URL, obtenga los datos de la ruta correspondiente

Pros: funciona

Contras: rehacer el manual de reconocimiento de ruta url sin usar el enrutador ng2

Answer 2

Actualizado para RC5

En lugar de comenzar con la URL actual e intentar obtener las rutas desde la URL, puede obtener todas las rutas activadas (asociadas con la toma principal) desde RouterState :

Después del final de cada ciclo de vida de navegación exitoso, el enrutador crea un árbol de ActivatedRoute , que conforman el estado actual del enrutador. Podemos acceder al RouterState actual desde cualquier lugar de nuestra aplicación utilizando el servicio Router y la propiedad routerState .

El estado del enrutador nos proporciona los métodos para recorrer arriba y abajo el árbol de ruta desde cualquier ruta activada para obtener la información que podamos necesitar de las rutas de padres, niños y hermanos. - reference

Suscríbete a eventos de enrutador, luego, después de cada evento NavigationEnd , recorre el árbol de ActivatedRoute desde la root :

import { Component } from ''@angular/core'';
import { Router, ActivatedRoute, NavigationEnd } from ''@angular/router'';
import ''rxjs/add/operator/filter'';

@Component({
  selector: ''breadcrumbs'',
  template: `
  <div>
    breadcrumbs: 
    <span *ngFor="let breadcrumb of breadcrumbs; let last = last">
      <a [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
      <span *ngIf="!last">></span>
    </span>
  </div>`
})
export class BreadcrumbsComponent {
  breadcrumbs: Array<Object>;
  constructor(private router:Router, private route:ActivatedRoute) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {  // note, we don''t use event
        this.breadcrumbs = [];
        let currentRoute = this.route.root,
            url = '''';
        do {
          let childrenRoutes = currentRoute.children;
          currentRoute = null;
          childrenRoutes.forEach(route => {
            if(route.outlet === ''primary'') {
              let routeSnapshot = route.snapshot;
              console.log(''snapshot:'', routeSnapshot)
              url += ''/'' + routeSnapshot.url.map(segment => segment.path).join(''/'');
              this.breadcrumbs.push({ 
                label: route.snapshot.data.breadcrumb,
                url:   url });
              currentRoute = route;
            }
          })
        } while(currentRoute);
      })
  }
}

Las rutas se ven así:

{ path: '''', component: HomeComponent, data: {breadcrumb: ''home''}}

Plunker - RC.5, enrutador 3.0.0-rc.1

Consulte también https://.com/a/38310404/215945 para obtener una solución similar.