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.