web-dev-qa-db-fra.com

Angular 2 - Comment naviguer vers un autre itinéraire en utilisant this.router.parent.navigate ('/ about')?

Angular 2 - Comment naviguer vers un autre itinéraire en utilisant this.router.parent.navigate ('/ about').

Cela ne semble pas fonctionner. J'ai essayé location.go ("/ about"); comme cela n'a pas fonctionné.

en gros, une fois qu'un utilisateur s'est connecté, je souhaite les rediriger vers une autre page.

Voici mon code ci-dessous:

 import {Component} from 'angular2/angular2';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
 import {Router} from 'angular2/router';

 import {AuthService} from '../../authService';

 //Model
 class User {
   constructor(public email: string, public password: string) {}
 }

 @Component({
   templateUrl:'src/app/components/todo/todo.html',
   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
 })

 export class Todo {   
     model = new User('[email protected]', 'Password'); 
     authService:AuthService;
     router: Router;

   constructor(_router: Router, _authService: AuthService){   
       this.authService = _authService;
       this.router = _router;
   }

   onLogin = () => {
       this.authService.logUserIn(this.model).then((success) => {      

          //This is where its broke - below:          
          this.router.parent.navigate('/about');

       });
   }
 }

Merci d'avance!

javascriptangularangular2-routing
144
AngularM

Routage de chemin absolu

Il y a 2 méthodes de navigation, .navigate() et .navigateByUrl()

Vous pouvez utiliser la méthode .navigateByUrl() pour le routage de chemin absolu:

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

Vous mettez le chemin absolu vers l'URL du composant vers lequel vous voulez naviguer.

Remarque: indiquez toujours le chemin absolu complet lorsque vous appelez la méthode navigateByUrl du routeur. Les chemins absolus doivent commencer par /

// Absolute route - Goes up to root level    
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params   
this.router.navigate(['/root/child', crisis.id]);

Routage de chemin relatif

Si vous souhaitez utiliser le routage de chemin relatif, utilisez la méthode .navigate().

REMARQUE: le fonctionnement de l'acheminement, en particulier des itinéraires parent, frère et enfant, n'est pas intuitif:

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });

// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });

// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });

// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });

Ou si vous avez juste besoin de naviguer dans le chemin de route actuel, mais vers un paramètre de route différent:

// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });

Tableau de paramètres de liaison

Un tableau de paramètres de liens contient les ingrédients suivants pour la navigation du routeur:

  • Chemin de la route vers le composant de destination. ['/hero']
  • Paramètres de route obligatoires et facultatifs qui entrent dans l'URL de la route. ['/hero', hero.id] ou ['/hero', { id: hero.id, foo: baa }]

Syntaxe semblable à un répertoire

Le routeur prend en charge la syntaxe de type annuaire dans une liste de paramètres de lien afin de faciliter la recherche de noms de route:

./ ou aucune barre oblique n'est relative au niveau actuel.

../ pour monter d'un niveau dans le chemin.

Vous pouvez combiner une syntaxe de navigation relative avec un chemin d'ancêtre. Si vous devez naviguer vers un itinéraire frère, vous pouvez utiliser la convention ../<sibling> pour monter d'un niveau, puis parcourir le chemin de l'itinéraire frère.

Remarques importantes sur la nagivation relative

Pour parcourir un chemin relatif avec la méthode Router.navigate, vous devez fournir la ActivatedRoute pour que le routeur sache où vous vous trouvez dans l'arbre de routage actuel.

Après le tableau des paramètres de liaison, ajoutez un objet avec une propriété relativeTo définie sur ActivatedRoute. Le routeur calcule ensuite l'URL cible en fonction de l'emplacement de la route active.

De officiel Documentation de routeur angulaire

237
TetraDev

Tu devrais utiliser

this.router.parent.navigate(['/About']);

En plus de spécifier le chemin de l'itinéraire, vous pouvez également spécifier le nom de votre itinéraire:

{ path:'/About', name: 'About',   ... }

this.router.parent.navigate(['About']);
30
Luca

Aussi peut utiliser sans parent

dire la définition du routeur comme:

{path:'/about',    name: 'About',   component: AboutComponent}

alors peut naviguer par name au lieu de path

goToAboutPage() {
    this.router.navigate(['About']); // here "About" is name not path
}

mis à jour pour la V2.3.0

Dans Routing from v2.0 , la propriété name n'existe plus. route définit sans la propriété name . vous devez donc utiliser chemin au lieu de name . this.router.navigate(['/path']) et pas de barre oblique pour le chemin, utilisez donc path: 'about' au lieu de path: '/about'

définition du routeur comme:

{path:'about', component: AboutComponent}

puis peut naviguer par path

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}
22
Shaishab Roy
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');
7
suresh

Personnellement, j’ai constaté que, puisque nous maintenons une collection ngRoutes (histoire longue), je trouve le plus de plaisir parmi:

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}

En fait, je l'utilise dans l'une de nos questions d'entrevue. De cette façon, je peux obtenir une lecture quasi instantanée de l'auteur du développement pour toujours en observant qui s'agite lorsqu'ils rencontrent GOTO(1) pour la redirection de la page d'accueil.

1
ZenAtWork