Skip to content

Router: link to child component should go to default child route if no child route name #5200

@wardbell

Description

@wardbell

In many cases, the Parent component will display links to the child components. The parent doesn't know about the child's own routes and shouldn't have to know in this scenario.

For example, suppose that we have a "Hero Employment Agency" that matches hero employees to crises.

The AppComponent is the parent and it is a shell with links across the top to go to child "feature" components, CrisisCenterComponent and HeroesComponent, each dealing with its own concern (managing crises, managing heroes), each with its own rats-nest of sub-components and routes.

Assume

@Component({
  selector:'my-app',
  template:  `
    <h1 class="title">Hero Employment Agency</h1>
    <a [router-link]="[...]" >Crisis Center</a>
    <a [router-link]="[...]" >Heroes</a>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: '/crisis-center/...', as: 'CrisisCenter', component: CrisisCenterComponent},
  {path: '/heroes/...',  as: 'Heroes', component: HeroesComponent}
]))
export class AppComponent { ... }

And

@Component({ ... })
@RouteConfig([
  {path:'/',    as: 'CrisisCenter', component: CrisisListComponent},
  {path:'/:id', as: 'CrisisDetail', component: CrisisDetailComponent}
])
export class CrisisCenterComponent { }

And

@Component({ ... })
@RouteConfig([
  {path:'/',    as: 'Heroes', component: HeroListComponent},
  {path:'/:id', as: 'HeroDetail', component: HeroDetailComponent}
])
export class HeroesComponent { }

Right now, the AppComponent template's link bar has to look something like this:

<a [router-link]="['CrisisCenter', 'CrisisCenter']" >Crisis Center</a>
<a [router-link]="['Heroes', 'Heroes']" >Heroes</a>

That's silly. Worse, it obliges the AppComponent to know about at least one of the route names for each child feature.

I'd rather it be:

<a [router-link]="['CrisisCenter']" >Crisis Center</a>
<a [router-link]="['Heroes']" >Heroes</a>

At present, this raises a complaint about a non-terminal route. But what if the child component had a default route? Then the router would know how to keep working it's way toward a terminal route.

I can think of ways to identify a default route:

  1. A "default" property (only one allowed per configuration)
  2. A child route with the path \

The other constraint would be that a default route cannot have a parameters object ... because there would be no way to specify it. We could live with that.

Corollary

The {path: '/crisis-center/...', syntax seems unnecessary if the target component has configured routes, one of which is the default.

I don't think this is a big deal. But if we could omit it, then AppComponent would never have to know that CrisisCenterComponent has its own routes.

That seems like a win to me.

Metadata

Metadata

Assignees

Labels

effort2: daysfeatureLabel used to distinguish feature request from other issues

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions