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 se trouve derrière un fichier login form. Lorsque la connexion est réussie, elle est dirigée vers une route enfant pour l'application d'administration.

Mon problème est que je ne peux pas utiliser le global navigation menucar le routeur essaie de router dans mon AdminComponentau lieu de mon AppCompoment. Donc ma navigation est interrompue.

Un autre problème est que si quelqu'un veut accéder directement à l'URL, je veux rediriger vers la route de «connexion» parente. Mais je ne peux pas le faire fonctionner. Il me semble que ces deux problèmes sont similaires.

Une idée de la façon dont cela peut être fait?

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

Lien : la directive RouterLink traite toujours le lien fourni comme un delta de 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 la directivesbaie:

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

Impératif : La navigate()méthode nécessite un point de départ (c'est-à-dire le relativeToparamètre). 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});

Cela semble fonctionner pour moi au printemps 2017:

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

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

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

Vous pouvez accéder à votre racine parent comme ceci

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

Vous devrez injecter la Route active actuelle dans le constructeur

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

  }

constructor(private router: Router) {}

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

Le routeur prend en charge

• chemins absolus /xxx- démarrés sur le routeur du composant racine
• chemins relatifs xxx- démarrés sur le routeur du composant actuel
• chemins relatifs ../xxx- démarrés sur le routeur parent du composant actuel

Pour naviguer vers le composant parent quel que soit le nombre de paramètres de l'itinéraire actuel ou de l'itinéraire parent: Mise à jour angulaire 6 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 une route absolue que vous pouvez utiliser avec le routeur singleton.

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

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
  ) { }

sans trop tarder:

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

le paramètre '..' rend la navigation d'un niveau supérieur, c'est-à-dire parent :)

Mes itinéraires ont un modèle comme celui-ci:

• utilisateur / modifier / 1 -> Modifier
• user / create / 0 -> Créer
• utilisateur / -> Liste

Lorsque je suis sur la page Modifier, par exemple, et que j'ai besoin de revenir à la page de liste, je reviendrai 2 niveaux plus haut sur l'itinéraire.

En y réfléchissant, 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);

ajouter un emplacement à votre constructeur à partir de @angular/common

constructor(private _location: Location) {}

ajoutez la fonction de retour:

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

et ensuite à votre avis:

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

Si vous utilisez la directive uiSref, vous pouvez le faire

uiSref="^"

Ma solution est:

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

Et l' Routerinjection:

private readonly _router: Router