Angular 2 - Comment naviguer vers une autre route en utilisant this.router.parent.navigate ('/ about')?

Angular 2 - Comment naviguer vers une autre route en utilisant this.router.parent.navigate('/about').

Cela ne semble pas fonctionner. J'ai essayé location.go("/about");car cela ne fonctionnait pas.

En gros, une fois qu'un utilisateur s'est connecté, je veux le 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');

       });
   }
 }

Routage de chemin absolu

Il existe 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 souhaitez accéder.

Remarque: spécifiez toujours le chemin absolu complet lors de l'appel de la navigateByUrlméthode du routeur . Les chemins absolus doivent commencer par une/

// 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 .navigate()méthode.

REMARQUE: Le fonctionnement du routage est un peu peu intuitif, en particulier les itinéraires parent, frère et enfant:

// 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 actuel de l'itinéraire, mais vers un paramètre d'itinéraire 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 des paramètres de liaison

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

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

Syntaxe semblable à un répertoire

Le routeur prend en charge la syntaxe de type répertoire dans une liste de paramètres de lien pour aider à guider la recherche de nom d'itinéraire:

./ ou aucune barre oblique de début n'est relative au niveau actuel.

../ pour monter d'un niveau dans le chemin de la route.

Vous pouvez combiner la syntaxe de navigation relative avec un chemin d'ancêtre. Si vous devez naviguer vers une route sœur, vous pouvez utiliser la ../<sibling>convention pour monter d'un niveau, puis sur et descendre le chemin de route frère.

Remarques importantes sur la nagivation relative

Pour parcourir un chemin relatif avec la Router.navigateméthode, vous devez fournir le ActivatedRoutepour indiquer au routeur où vous vous trouvez dans l'arborescence de routes actuelle.

Après le tableau des paramètres de lien, ajoutez un objet avec une relativeTopropriété définie au ActivatedRoute. Le routeur calcule ensuite l'URL cible en fonction de l'emplacement de l'itinéraire actif.

À partir de la documentation officielle du routeur angulaire

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

Peut également utiliser sans parent

dire la définition du routeur comme:

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

alors peut naviguer au namelieu depath

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

Mis à jour pour V2.3.0

Dans le routage à partir de la v2.0, la propriété de nom n'existe plus. route définie sans propriété de nom . vous devez donc utiliser le chemin au lieu du nom . this.router.navigate(['/path'])et pas de barre oblique pour le chemin, utilisez donc à la path: 'about'place depath: '/about'

définition de routeur comme:

{path:'about', component: AboutComponent}

alors peut naviguer par path

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

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

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

Personnellement, j'ai trouvé que, puisque nous maintenons une ngRoutescollection (longue histoire), je trouve le plus de plaisir à:

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

Je l'utilise en fait dans le cadre d'une de nos questions d'entrevue. De cette façon, je peux obtenir une lecture quasi instantanée de qui se développe depuis toujours en regardant qui se contracte lorsqu'ils se heurtent à la GOTO(1)redirection de la page d'accueil.