Navigation relative avec un routeur angulaire 2 (version 3)

Question

Comment naviguer relatif de /questions/123/step1 à /questions/123/step2 dans un composant en utilisant Router sans concaténation de chaînes et en 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.

Answer 1

Après avoir fait un peu plus de recherche, je suis tombé sur avec

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

et

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

Première approche (Routeur.createUrlTree API) ne fonctionne pas pour moi, c'est à dire rien ne s'est passé. La deuxième approche (Routeur.naviguer API) fonctionne.

Cependant, la deuxième approche utilise NavigationExtras (deuxième argument) qui est documenté avec des @experimental. J'espère qu'il ne sera pas de grands changements avec la prochaine version de nouveau... et NavigationExtras sera stable.

Toutes les autres suggestions/approches, n'hésitez pas à répondre à ma question ci-dessus.

Mise à jour 2016-10-12

Il y a un autre stackoverflow question ainsi:

• Comment puis-je naviguer d'un frère ou d'une route

Mise à jour 2016-10-24

Documentation:

• De Routage Et De La Navigation (Par Rapport À La Navigation

Answer 2

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 / recipes / 1 / edit

Answer 3

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!!