CODEWITHSUNDEEP
angularangular-ui-router
Kevin Dias
Kevin Dias

Reputation: 1076

Angular 9 route children not working on navigation

i have a children path of the parent path but when i call it, it change the url to correct path but load ProductDetailsComponent instead of ChangeEmailComponent

app-routing.ts

 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path:':productName/:productId', component: ProductDetailsComponent },
  { path:'perfil', component: ProfileComponent, children: [
    { path: 'email', component: ChangeEmailComponent },
  ]},
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: false })
  ],
  exports: [RouterModule]
})

ProfileComponent.ts 

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

this change the url to profile/email but open ProductDetailsComponent instead of ChangeEmailComponent

Upvotes: 1

Views: 972

Answers (3)

Kevin Dias
Kevin Dias

Reputation: 1076

Solution as above mencioned, had to combined both

  const routes: Routes = [
      { path: '', redirectTo: '/home', pathMatch: 'full'},
      { path: 'home', component: HomeComponent },
      { path:'product/:productName/:productId', component: ProductDetailsComponent },
      { path:'perfil', children: [
        { path: '', component: ProfileComponent},
        { path: 'email', component: ChangeEmailComponent },
      ]},
      { path: '404', component: NotFoundComponent },
      { path: '**', redirectTo: '/404'}
];

Upvotes: 0

GM-atteoni
GM-atteoni

Reputation: 455

Try adding a prefix to your product route:

from

{ path:':productName/:productId', component: ProductDetailsComponent },

to

{ path:'product/:productName/:productId', component: ProductDetailsComponent },

Upvotes: 1

Aakash Garg
Aakash Garg

Reputation: 10979

Put a router outlet inside profilecomponent or change your routing to :- 

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path:':productName/:productId', component: ProductDetailsComponent },
  { path:'perfil', children: [
    { path: '', component: ProfileComponent},
    { path: 'email', component: ChangeEmailComponent },
  ]},
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404'}
];

For explanation refer :- https://medium.com/@aakashgarg19/the-art-of-nested-router-outlets-in-angular-dafb38245a30

Upvotes: 2

Related Questions