web-dev-qa-db-fra.com

Comment naviguer vers un itinéraire parent à partir d'un itinéraire enfant?

Mon problème est assez classique. J'ai une partie privée d'une application qui est derrière un login form. Lorsque la connexion est réussie, il passe à une route enfant pour l'application admin.

Mon problème est que je ne peux pas utiliser le global navigation menu parce que le routeur essaie de router dans mon AdminComponent au lieu de mon AppCompoment. Donc, ma navigation est cassée.

Un autre problème est que si quelqu'un veut accéder directement à l'URL, je veux rediriger vers la route parent "login". Mais je ne peux pas le faire fonctionner. Il me semble que ces deux numéros sont similaires.

Une idée de comment ça peut être fait?

angularangular-routingangular-router
59
Carl Boisvert

Voulez-vous un lien/HTML ou voulez-vous router impérativement/en code?

Link: La directive RouterLink considère toujours le lien fourni comme un delta par rapport à l'URL actuelle:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

Avec RouterLink, n'oubliez pas d'importer et d'utiliser le tableau directives:

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

Impératif: La méthode navigate() nécessite un point de départ (c'est-à-dire le paramètre relativeTo). Si aucun n'est fourni, la navigation est absolue:

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});
115
Mark Rajcok

Cela semble fonctionner pour moi à partir du printemps 2017:

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

Où votre composant ctor accepte ActivatedRoute et Router, importé comme suit:

import { ActivatedRoute, Router } from '@angular/router';

33
ne1410s

Vous pouvez accéder à votre racine parent comme ceci

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

Vous aurez besoin d'injecter la Route active actuelle dans le constructeur

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }
11
Chris Lamothe

Pour naviguer vers le parent composant quel que soit le nombre de paramètres de la route actuelle ou de la route mère: Angular 6 update 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

Cela a l'avantage supplémentaire d'être un itinéraire absolu que vous pouvez utiliser avec le routeur singleton.

(Angular 4+ bien sûr, probablement Angular 2 aussi.)

6
kayjtea
constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

Le routeur prend en charge

  • chemins absolus /xxx - démarré sur le routeur du composant racine
  • chemins relatifs xxx - démarré sur le routeur du composant actuel
  • chemins relatifs ../xxx - démarré sur le routeur parent du composant actuel
4
Günter Zöchbauer

ajoutez l'emplacement à votre constructeur de @angular/common

constructor(private _location: Location) {}

ajouter la fonction de retour:

back() {
  this._location.back();
}

et ensuite à votre avis:

<button class="btn" (click)="back()">Back</button>
1
user3021615

Une autre façon pourrait être comme ça

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

et voici le constructeur

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }
1
Johansrk

Mes itinéraires ont un motif comme celui-ci:

  • utilisateur/edit/1 -> Edit
  • utilisateur/créer/0 -> créer
  • utilisateur/-> liste

Lorsque je suis sur la page d'édition, par exemple, et que j'ai besoin de revenir à la page de liste, je reviendrai 2 niveaux plus haut sur la route.

En réfléchissant à cela, j'ai créé ma méthode avec un paramètre "level".

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

Donc, pour passer de l’édition à la liste, j’appelle la méthode comme ça:

this.goBack(2);
0
Carlinhos