Why has CrisisCenterRoutes a Children property and HeroesRoutes not?

Question

When you look at the angular 2 heroes sample:

http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

There is the CrisisCenter and Heroes link

Both render a list of things or you can edit the thing by id.

But the RoutesConfig is totally different aside from the

redirectTo: '/crisis-center',

CrisisCenter has a route children property:

children: [
      {
        path: 'admin',
        component: CrisisAdminComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'edit/:id',
        component: CrisisDetailComponent,
        canDeactivate: [CanDeactivateGuard]
      },
      {
        path: '',
        component: CrisisListComponent
      }
    ]

When I search on the angular 2 site: https://angular.io/docs/ts/latest/glossary.html#!#stq=router&stp=1

for "children" I get not the information what that children property is for.

When I look at the heroes RoutesConfig:

export const HeroesRoutes: RouterConfig = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

There is no children property. I can make the Heroes load on the root page too: http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

So for what is that children property good for?

Answer 1

A child component will be displayed first into the parent component (here in the CrisisCenterComponent router-outlet) and then into the next router-outlet (in this example, AppComponent); Also, the child component path will be added (extend) to the parent path with "/" between.

You can find the angular2 description for this at: https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component

Notice that the parent /crisis-center route has a children property with an array of two routes. These two routes navigate to the two Crisis Center child components, CrisisListComponent and CrisisDetailComponent.

There are some important differences in the treatment of these routes.

First, the router displays the components of these child routes in the RouterOutlet of the CrisisCenterComponent, not in the RouterOutlet of the AppComponent shell.

Second, the child paths extend the path of their parent route.

Normally paths that begin with / refer to the root of the application. Here they are appended to the path to the CrisisCenterComponent.

To write an URL that navigates to the CrisisListComponent, we'd append its child route path, /, to /crisis-center.

To write an URL that navigates to the CrisisDetailComponent, we'd append the child route path, /, followed by the crisis id, yielding something like:

Here is a possible way of using this (main advantages being: all business feature/object routes in one place AND share a common template - Dashboard - between the different feature/object business actions):

import { RouterConfig }          from '@angular/router';

import { Object1Dashboard } from './object1.dashboard';
import { Object1List } from './object1.list';
import { Object1New } from './object1.new';
import { Object1Edit } from './object1.edit';

export const Object1Routes: RouterConfig = [
    {
        path: 'object1',
        component: Object1Dashboard,
        'children': [
            { path: '', component: Object1List },
            { path: 'new', component: Object1New },
            { path: 'edit/:id', component: Object1Edit }
        ]
    }
];

and the htmls for the (Dashboard) can be like:

<h2> Dashboard</h2>
<div>
   <p>
      <a [routerLink]="['/object1']">View</a>
      <a [routerLink]="['/object1/new']">New</a>
   </p>
   <p><router-outlet></router-outlet></p>
</div>

With this approach you can share a common menu between the different feature options (like list, new and edit)