Angular 2 router.navigate

Question

J'essaie de naviguer vers une route dans Angular 2 avec un mélange de paramètres de route et de requête.

Voici un exemple d'itinéraire où la route est la dernière partie du chemin :

{ path: ':foo/:bar/:baz/page', component: AComponent }

J'essaie d'établir un lien en utilisant le tableau comme suit :

this.router.navigate(['foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)

Je ne reçois aucune erreur et d'après ce que je comprends, cela devrait fonctionner.

La documentation d'Angular 2 (pour le moment) contient l'exemple suivant :

{ path: 'hero/:id', component: HeroDetailComponent }

['/hero', hero.id] // { 15 }

Quelqu'un peut-il voir où je fais fausse route ? Je suis sur le routeur 3.

Answer 1

Si le premier segment ne commence pas par / il s'agit d'une route relative. router.navigate a besoin d'un relativeTo paramètre pour la navigation relative

Soit vous rendez la route absolue :

this.router.navigate(['/foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)

ou vous passez relativeTo

this.router.navigate(['../foo-content', 'bar-contents', 'baz-content', 'page'], {queryParams: this.params.queryParams, relativeTo: this.currentActivatedRoute})

Voir aussi

• https://github.com/angular/angular.io/blob/c61d8195f3b63c3e03bf2a3c12ef2596796c741d/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts#L108
• https://github.com/angular/angular/issues/9476

Answer 2

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

export class ClassName {

  private router = ActivatedRoute;

    constructor(r: ActivatedRoute) {
        this.router =r;
    }

onSuccess() {
     this.router.navigate(['/user_invitation'],
         {queryParams: {email: loginEmail, code: userCode}});
}

}

Get this values:
---------------

ngOnInit() {
    this.route
        .queryParams
        .subscribe(params => {
            let code = params['code'];
            let userEmail = params['email'];
        });
}

Réf : https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html

Answer 3

Aussi simple que

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

constructor( private router:Router) {}

return(){this.router.navigate(['/','input']);}

Ici, vous serez redirigé vers l'entrée de la route. Si vous souhaitez aller vers un chemin particulier avec une relative à un certain chemin alors.

return(){this.router.navigate(['/relative','input']);}

Ici sur return() est la méthode que nous allons déclencher sur un clic de bouton

<button (click)=return()>Accueil