web-dev-qa-db-fra.com

Routeur Angular2, obtenez les données de route à partir de l'URL, pour afficher le fil d'Ariane

J'utilise routeur angular2 .

Pour dessiner le fil d'Ariane d'une URL, disons site.com/a/b/c/15 je fais ce qui suit:

  1. Obtenez l'itinéraire de site.com/a/b/c/15 et obtenez le joli nom associé à l'itinéraire
  2. Obtenez l'itinéraire de site.com/a/b/c et obtenez le joli nom associé à l'itinéraire
  3. Obtenez l'itinéraire de site.com/a/b et obtenez le joli nom associé à l'itinéraire
  4. Obtenez l'itinéraire de site.com/a et obtenez le joli nom associé à l'itinéraire

Disons donc que j'ai les itinéraires suivants:

{ 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'}},

Le résultat de mon processus serait un tableau contenant {"I am C", "I am B", "I am C"} et grâce à cela je peux afficher un joli fil d'Ariane "I am A > I am B > I am C" qui explique l'itinéraire actuel.

Cette utilisation pour travailler avec le faire obsolète du routeur

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

Cependant maintenant; avec le dernier routeur, je ne peux plus traiter cette logique de reconnaissance.

Comment obtenir les données d'itinéraire associées à une URL?

angularangular2-routingangular2-router
22
ATX

Jusqu'à présent, la solution la plus réalisable est (faite):

  • Rendre les routes exportables/importables
  • Obtenez la mise à jour actuelle de l'URL de router.events
  • Lors du changement d'URL, faites une boucle sur le chemin des routes, voyez si le modèle correspond à l'URL
  • Si le bagueur correspond à l'URL, obtenez les données de l'itinéraire correspondant

Avantages: fonctionne

Inconvénients: refaire manuellement le manuel de reconnaissance de l'itinéraire url sans utiliser le routeur ng2

2
ATX

Mise à jour pour RC5

Au lieu de commencer par l'URL actuelle et d'essayer d'obtenir les itinéraires à partir de l'URL, vous pouvez obtenir tous les itinéraires activés (associés à la sortie principale) à partir de RouterState:

Après la fin de chaque cycle de vie de navigation réussi, le routeur crée une arborescence de ActivatedRoutes, qui constitue l'état actuel du routeur. Nous pouvons accéder au RouterState actuel de n'importe où dans notre application en utilisant le service Router et la propriété routerState.

L'état du routeur nous fournit des méthodes pour parcourir de haut en bas de l'arbre de route à partir de n'importe quelle route activée pour obtenir les informations dont nous pouvons avoir besoin à partir des routes parent, enfant et frère. - référence

Abonnez-vous aux événements du routeur, puis, après chaque événement NavigationEnd, parcourez l'arborescence de ActivatedRoutes à partir de 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);
      })
  }
}

Les itinéraires ressemblent à ceci:

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

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

Voir aussi https://stackoverflow.com/a/38310404/215945 pour une solution similaire.

23
Mark Rajcok

Toute solution de fil d'Ariane doit gérer -

  1. approche déclarative de la définition du fil d'Ariane dans le routage des applications.
  2. manière asynchrone dynamique de mettre à jour n'importe quelle route avec une étiquette de la réponse du serveur.
  3. façon de sauter des itinéraires spécifiques de l'affichage dans le fil d'Ariane.

J'ai créé une bibliothèque Angular pour gérer tout cela, appelée xng-breadcrumbs - https://github.com/udayvunnam/xng-breadcrumb

n'hésitez pas à vérifier, une Angular développée montrant l'utilisation du fil d'Ariane - https://xng-breadcrumb.netlify.com

La planification, la création et la publication continue d'une bibliothèque angulaire sont bien documentées dans cet article moyen

0
Uday Vunnam