Routing with parametrs in Angular

Question

I've got problems with my routing configuration. My app logic - I've got a dropdown in header which controls navigation. Dropdown options navigate to page with extra navigation bar under dropdown. Routing parameter is passing when you click on dropdown option. Problem is that I need to load component which isn't on navigation bar, but used as default screen after dropdown navigation.

First navigation "layer" is dropdown. After that URL is index/Param#.

Second navigation "layer" is nav bar, which loaded on pages with url index/Param#. On that pages I've got component ("default screen"), which loaded when url is index/Param#. But this component doesn't have any links on nav bar.

When I click links on navbar url becomes index/Param#/params or index/Param#/results etc. My app logic

App-routing.module.ts

const routes: Routes = [
   { path: '', component: MainComponent },
   { path: 'stages', component: StagesComponent }
];

Stages-routing.module.ts

const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: ':name', component: StageComponent },
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    ]}
];

myService.ts

navigateTo(selectedItem) {
      this.router.navigate(['stages', selectedItem]);
     // selectedItem is dropdown value
  }

When I navigate for example to "programm" Angular can't resolve this path. What should I do?

Answer 1

Add / after stages will solve your problem.

navigateTo(selectedItem) {
      this.router.navigate(['stages/', selectedItem]);
     // selectedItem is dropdown value
  }

Hope this will help!

Answer 2

basically what you've did here is all routes goes to stages/:name and other routes bellow them is never accessed and you have to delete just this line
{ path: ':name', component: StageComponent } and everything will work fine as you expected

const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: ':name', component: StageComponent }, // Delete this line
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    ]}
];

Error here is Angular routes is reading from top to bottom and first child routes expected a param name and everything what goes after stages/whatever will render StagesComponent and other routes is never touched.

You can add this line of code at the end of childrend array this mean first it will chec if is

'stages/programm' if isn't this route go to next one
'stages/jury' if isn't this route go to next one 
...
// and so one till the end of array
// and if no child routes find then will display default component which is 'StageComponent' 

// so your routes array should be something like this
const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    { path: ':name', component: StageComponent }, // if no child routes found then display default
    ]}
];

Or you can delete this line and if user write anything else that you have in children array then redirect it to 404 page .
For more info please read docs on Angular https://angular.io/guide/router they have really good explanation of how things works in angular.