Naviguer par rapport Angulaire 2 Routeur (Version 3)

Comment naviguer relative de /questions/123/step1 à /questions/123/step2 à l'intérieur d'un composant à l'aide de Router sans la concaténation de chaîne et en précisant /questions/123/?

J'ai ajouté une réponse ci-dessous. N'hésitez pas à suggérer une meilleure réponse. 😉 Je pense qu'il y a de meilleures approches.

InformationsquelleAutor Thomas Zuberbühler | 2016-08-24
  1. 76

    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 @experimental. J'espère qu'il ne sera pas de grands changements avec la prochaine version de nouveau... et NavigationExtras sera stable.

    D'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:

    Mise à jour 2016-10-24

    Documentation:

    Mise à jour 2019-03-08

    Il semble qu'il y avait des changements dans Angulaire 7.1. Il y a une réponse dans un autre post comment le résoudre Angulaire 7.1. Veuillez vous référer à https://stackoverflow.com/a/38634440/42659.

    • selon mon test, il devrait être this.router.navigate(['step2'], {relativeTo: this.activatedRoute}); sans ../ avant le chemin d'accès.
    • le ../ est spécifique à cet exemple, ici le but est d'essayer de remonter d'un niveau, puis ajouter step2. ainsi, par exemple /parent/child deviendrait /parent/step2 alors que dans votre exemple, il devient /parent/child/step2. Votre exemple est valable de code, mais pour la question posée, la réponse est correcte.
    InformationsquelleAutor Thomas Zuberbühler
  2. 11

    D'abord, injecter routeur & ActivatedRoute sur constructeur

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

    alors Cliquez sur l'Événement:

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

    Vous accédez à la page prévue.Dans mon scénario, je voulais aller dans recette /1 pour modifier la recette.
    http://localhost:4200/recipes/1/edit

    InformationsquelleAutor Shahin Al Kabir Mitul
  3. 1

    Vous pouvez utiliser ci-dessous,

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

    Espérons que cette aide!!

    • Merci. Mais je voudrais éviter d'écrire le parcours complet de chemin.
    InformationsquelleAutor Madhu Ranjan
  4. 0

    Remarque: les routes sont sensibles à la casse, donc assurez-vous de faire correspondre le boîtier à travers

    Cela a fonctionné pour moi Angulaire 8:

    À partir du composant parent /page, pour naviguer vers la sous-page à l'aide de la machine: 

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

    Mon routeur dans le parent du module ressemble à ceci:

    const routes: Routes = [
  {
    path: '',
    component: MyPage,
    children: [
      { path: 'subPage', component: subPageComponent}
    ]
  }
];

    Et sur le parent de la page html de celui-ci permet de naviguer à l'aide d'un lien:

    <a [routerLink]="'subPage'">Sub Page Link</a>
<router-outlet></router-outlet>
    InformationsquelleAutor Tony