Is there a way to get a list of the children routes in Angular2?

Question

I currently have my Angular2 routing working successfully with child routes.

My question is if there's a way to get a list of the child routes defined by my routing table.

For example, if I had a Routes constant of the following:

export const routes: Routes = [{
    path: '',
    redirectTo: 'product-list',
    pathMatch: 'full'
  },
  {
    path: 'product-list',
    component: ProductList
  },
  {
    path: 'product-details/:id',
    component: ProductDetails,
    children: [{
        path: '',
        redirectTo: 'overview',
        pathMatch: 'full'
      },
      {
        path: 'overview',
        component: Overview
      },
      {
        path: 'specs',
        component: Specs
      }
    ]
  }
];

Is there a way to get all of the children URLs under the product-details path.

So I should see a list of URLs for:

• overview
• specs

**Edit (04/28/2017):

A few things:

I wasn't at my computer at the time of writing this question so the routes constant was just pulled from online. Although the structure is similar, it turns out I'm looking at a child of a child. Here is my exact routes:

const AUTH_ROUTES: Routes = [{
      path: 'auth',
      component: AuthComponent,
      canActivate: [AuthGuard],
      children: [{
            path: '',
            redirectTo: 'home',
            pathMatch: 'full'
          },
          {
            path: 'home',
            component: HomeComponent,
            pathMatch: 'full',
            data: {
              breadcrumb: "Home"
            }
          },
          ... a bunch of other routes ...
          {
            path: 'programmingpractice',
            component: ProgrammingpracticeComponent,
            data: {
              breadcrumb: "Programming Practice"
            },
            children: [{
                  path: 'apitree',
                  component: ApitreeComponent,
                  data: {
                    breadcrumb: "API Tree"
                  },
                  children: [{
                      path: 'apiexample',
                      component: ApiexampleComponent,
                      data: {
                        breadcrumb: "API Example"
                      },
                    },
                    {
                      path: 'apinotes',
                      component: ApinotesComponent,
                      data: {
                        breadcrumb: "API Notes"
                      },
                    },
                  ]
                }, 
                ... the remaining routes ...
             

I prefer not to import into my component as at some point, I plan on creating dynamic routes in the future (so I figure not referring to the original static constant is a good idea).

However, the weird part is that I did originally try to use the children getter from activated route but I'm either getting null or empty. Here is some sample code and the results I'm getting:

When I am in the component apitree (which is a child of root/auth/programmingpractice) I get the following:

console.log('Root:' + this._activatedRoute.root); //results in: Root:Route(url:'', path:'')

console.log('Snapshot:' + this._activatedRoute.snapshot); //results in: Snapshot:Route(url:'apitree', path:'apitree')

console.log('Parent:' + this._activatedRoute.parent); //results in: Parent:Route(url:'programmingpractice', path:'programmingpractice')

console.log('Children:' + this._activatedRoute.children); //results in: Children:

Another point I want to bring up is that this AUTH_ROUTE is for the authorized module (or logged in views) of my web app. So what I'm trying to say there is that is a submodule from the main app.module of my Angular2 app.

Sorry I didn't put more clarity in the first place, I honestly thought I was dealing with a simple syntax issue but based on the responses and my attempts against them, I'm not sure why I'm not getting the list of child routes.

Answer 1

A little bit late, but it may help someone. If you just want to get the children definition of your current route, this my be what you are looking for:

  constructor(private route: ActivatedRoute) {
    this.children = this.route.routeConfig.children;
  }