CODEWITHSUNDEEP
angularjsangularroutesrouter
Jan B.
Jan B.

Reputation: 6468

Angular2 routing v3.0.0 with deeply nested routes

right now migrating from router v2 to v3 (feels like a deja vu). The routing configuration is now decoupled from the components again. It overthrows the logic I considered quite sensible. They have introduced a children property in the RouterConfig which gives me headache. Assume an application with many routes similar to this

/club/123/member/98/tasklist/921/edit

The route was spread over the following components with the following @Routes decorators

@Routes([{path: '/club/:id', component: DelegateClubComponent}])
export class MainApp {...}

@Routes([{path: 'user/:id', component: DelegateUserComponent}])
export class DelegateClubComponent {...}

@Routes([{path: 'tasklist/:id', component: DelegateTaskListComponent}])
export class DelegateUserComponent {...}

@Routes([{path: 'edit', component: EditTaskListComponent}])
export class DelegateTaskListComponent {...}

Each of the DelegateXComponents were responsible for resolving the respective document and making it available in a Service the other components get injected. Moreoever, all of the DelegateXComponents rendered a little template with some data of the documents they were in charge of.

How is this done with router v3 ? It makes no sense to map the entire tree in a nested RouterConfig with 5 levels of children. On the other hand, do separate RouterConfigs work at all? 

export const clubRoute: RouterConfig = [
  { path: 'club/:id', component: DelegateClubComponent }];

export const userRoute: RouterConfig = [
  { path: 'user/:id', component: DelegateUserComponent }];

As long as there is no magic happening behind the scenes, how would the router know that the userRoute should be considered as a child route for clubRoute.

Confused greetings

Upvotes: 3

Views: 442

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658067

You can define configs in the same files as the components and then just combine them to a complete tree before passing it to the router.

import {childRoutes} from './child.component'

export const clubRoute: RouterConfig = [
  { path: 'club/:id', component: DelegateClubComponent, children: childRoutes }];

Upvotes: 2

Related Questions