What are the child routes in the angular for?

Question

{path: 'user/home', component: HomeComponent},
{path: 'user/other', component: OtherComponent}

And

{
  path: 'user', children: [
    {path: 'home', component: HomeComponent},
    {path: 'other', component: OtherComponent}
  ]
}

What are child routes to angular for? What is the fundamental difference between these two records?

Will patchmatch work the same for both cases? What I mean. Angular divides the url path into a tree of segments (user/list -> user, list).

pathMatch: full tells angular that it is required to match the segment value completely without going down to the child elements if this value does not match. Is it true that regardless of the recording option, the url segment tree will have the same structure?

I'm a little confused about the division of URLs into segments and the correlation of these segments with child components in angular.

The purpose becomes apparent if you want to implement route guards / resolvers. — Andrew Allen, Nov 08 '22 at 08:10

score 1 · Answer 1 · answered Nov 08 '22 at 08:10

There's none, it's just easier to write the second one, because you can apply guards and such at parent level.

{
  path: 'user', canActivateChild: [ActivateGuard], children: [
    {path: 'home', component: HomeComponent},
    {path: 'other', component: OtherComponent}
  ]
}

{path: 'user/home', canActivate: [ActivateGuard], component: HomeComponent},
{path: 'user/other', canActivateChild: [ActivateGuard], component: OtherComponent}

It's like every piece of code, the more you can factorize it, the better it is.

score 0 · Answer 2 · answered Nov 08 '22 at 08:14

Child paths in angular are a way to implement a hierarchical structure in you Component Tree.

In your case there is no difference, because you have not assigned a component to your parent path (user). The difference becomes visible if you need mutliple nested <router-outlets>. E.g. you could display a component in your user path. In this component there could be an additional <router-outlet>, which will be "populated" by the corresponding child path.

This way you could embed the HomeComponent (or OtherComponent) in your UserComponent

{
  path: 'user', 
  component: UserComponent,
  children: [
    {path: 'home', component: HomeComponent},
    {path: 'other', component: OtherComponent}
  ]
}

What are the child routes in the angular for?

2 Answers2