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

Question

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

Mon problème est que je ne peux pas utiliser l' global navigation menu parce que le routeur tente de route dans ma AdminComponent à la place de mon AppCompoment. Donc ma navigation est interrompue.

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

Une idée de comment cela peut être fait?

Answer 1

Voulez-vous un lien HTML ou voulez-vous route impérativement/dans le code?

Lien: Le RouterLink directive traite toujours le lien fourni comme un delta de l'URL:

[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 l' directives tableau:

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

Impératif: L' navigate() méthode nécessite un point de départ (c'est à dire, l' relativeTo paramè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});

Answer 2

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';

Answer 3

 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

Answer 4

Pour accéder au composant parent quel que soit le nombre de paramètres de l'itinéraire actuel ou de l'itinéraire parent:

    let routerLink = this._route.parent.snapshot.pathFromRoot
        .map(s => s.url).reduce((a, e) => a.concat(e)).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.)

Answer 5

Ajouter Location à 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>