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

194

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('Mark@gmail.com', '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');

       });
   }
 }
angular  typescript  angular2-routing 
— AngularM
source
De plus, j'ai défini la configuration de la route dans mon fichier app.ts comme suit: @RouteConfig ([{path: '/', redirectTo: '/ home'}, {path: '/ home', component: Todo, as : 'Home'}, {chemin: '/ about', composant: About, as: 'About'}])
— AngularM
vous devez supprimer le /dans vos chemins car il n'est pas nécessaire
— mast3rd3mon

Réponses:

333

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

— TetraDev
source
3
Remarquez si vous avez des routes enfants: { path: 'home', component: Home, children: homeRoutes }Ensuite, vous voulez fournir cela à la méthode du routeur: this.router.navigate(['home/address-search'])OUthis.router.navigateByUrl(/'home/address-search')
— Daniel Ram
Même c'est une bonne réponse, il est important de noter que cela this.router= Router;peut dérouter certains lecteurs, dans ce cas, il y a une mention à une injection de dépendance de Router, qui devrait me faire en utilisant ce code à la place constructor( private router: Router )
— siddharta
@siddharta Merci pour le tuyau, je ne l'ai pas remarqué jusqu'à ce que vous le signaliez. Je devais l'avoir écrit rapidement et j'avais l'intention de le mettre à jour plus tard, mais j'ai oublié. L'exemple a été mis à jour pour utiliser l'injection de dépendances appropriée maintenant.
— TetraDev
@TetraDev et d'où vient "this.route": D, ajoutez-le à vos dépendances
— Noob
33

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']);
— Luca
source
1
Salut, quand je fais cela, je reçois ce message d'erreur dans mon compilateur dactylographié: "L'argument de type 'string' n'est pas assignable au paramètre de type any [], Property push est manquant dans le type String"
— AngularM
J'ai essayé ceci et cela n'a pas fonctionné: this.router.parent.navigate ('[/ About]');
— AngularM
4
Vous devez utiliser cette syntaxe: this.router.parent.navigate (['/ About']); Vous devez passer le tableau ['/ About'] pas la chaîne '[/ About]'
— Luca
Pour l'utilisation de la version bêta du routeur 3this._router.navigate(['/some-route']);
— Adrian Moisa
27

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
}
— Shaishab Roy
source
6
nameest obsolète sur le type Route dans Angular 2.0.
— RynoRn
dans Angular 2, v2.3.0le datadoit être utilisé à la place de name. Pour plus de détails -> angular.io/docs/ts/latest/guide/router.html
— WildDev
8 
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');
— suresh
source
3
Bien que cet extrait de code puisse être la solution, inclure une explication contribue vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
— Adam Kipnis
2

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.

— ZenAtWork
source
N'y a-t-il pas quelque chose qui manque ici?
— Syska
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.