web-dev-qa-db-fra.com

Navigation relative avec Angular 2 Routeur (Version 3)

Comment naviguer par rapport à /questions/123/step1 à /questions/123/step2 dans un composant utilisant Router sans concaténation de chaînes et spécifiant /questions/123/?

J'ai ajouté une réponse personnelle ci-dessous. N'hésitez pas à suggérer une meilleure réponse. ;-) J'imagine qu'il existe de meilleures approches.

angulartypescriptangular2-routing
46
Thomas Zuberbühler

Après avoir fait quelques recherches, je suis tombé sur

this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute});

et

this.router.navigate(['../step2'], {relativeTo: this.activatedRoute});

La première approche ( API Router.createUrlTree ) n’a pas fonctionné pour moi, c’est-à-dire que rien ne s’est passé. La deuxième approche ( Router.navigate API ) fonctionne.

Cependant, la seconde approche utilise NavigationExtras (second argument) qui est documenté avec @experimental. Espérons qu'il n'y aura pas de gros changements avec la prochaine version à nouveau ... et NavigationExtras sera stable.

Toutes les autres suggestions/approches, s'il vous plaît n'hésitez pas à répondre à ma question ci-dessus.

Mise à jour 2016-10-12

Il y a aussi une autre question de stackoverflow:

Mise à jour 2016-10-24

Documentation:

Mise à jour 2019-03-08

Il semble qu’il y ait eu des changements dans Angular 7.1. Un autre message explique comment le résoudre avec Angular 7.1. Veuillez vous reporter à https://stackoverflow.com/a/38634440/42659 .

68
Thomas Zuberbühler

Tout d'abord, injecter le routeur et ActivatedRoute sur le constructeur

constructor(private route:ActivatedRoute,private router:Router) { }

puis utilisez pour cliquer sur l'événement:

onEditClick(){
        this.router.navigate(['edit'],{relativeTo:this.route});

Vous naviguez jusqu'à la page attendue. Dans mon scénario, je voulais utiliser recette/1 pour modifier la recette. http: // localhost: 4200/recettes/1/edit

8
Shahin Al Kabir Mitul

Vous pouvez utiliser ci-dessous,

L'hypothèse est questions est chargé dans votre primaire router-outlet

  this.router.navigate([
      '/',
      { 
        outlets: {
          primary: [
              // below may be replaced with different variables
              'questions',
              '123',  
              'step2'
          ]
        }
      }
  ])

J'espère que cela t'aides!!

1
Madhu Ranjan