Angular pass resolve data to child-routes

Question

i have the following Component Structure

• project
  • edit-project
  • sub-ressource1
  • sub-ressource2
  • sub-ressource3

So my routing looks like this:

const childroutes = [   {     path: '',     children: [       { path: 'edit', component: EditProjectComponent},       { path: 'subres1', component: Subres1Component},       { path: 'subres2', component: Subres2Component},       { path: 'subres3', component: Subres3Component},       { path: 'subres4', component: Subres4Component}     ]   } ]  {     path: 'project/:projectId',      component: ProjectDetailComponent,     children: childroutes,     resolve: { project: ProjectResolver} /** resolve Project from ProjectService **/ } 

As you can see i resolve my Projectdata from a service and can access them in ProjectDetailComponent via

this.route.snapshot.data 

So now the question is, how can i pass the data resolved in "EditProjectComponent" to all its childroutes components?

I now that i could do the following to resolve project-data in childcomponents:

const childroutes = [   {     path: '',     children: [       { path: 'edit', component: EditProjectComponent,resolve: { project: ProjectResolver}},       { path: 'subres1', component: Subres1Component,resolve: { project: ProjectResolver}},       { path: 'subres2', component: Subres2Component,resolve: { project: ProjectResolver}},       { path: 'subres3', component: Subres3Component,resolve: { project: ProjectResolver}},       { path: 'subres4', component: Subres4Component,resolve: { project: ProjectResolver}}     ]   } ] 

But this seems ugly and wrong.

Answer 1

You have two options here:

1. You can access parent resolve data via the child's resolver by creating a child-specific resolver and accessing the route's parent property.

[...module.ts | ...component.ts]

{     path: 'project/:projectId',      component: ProjectDetailComponent,     resolve: { project: ProjectResolver }     children: [         {              path: ':projectId/edit',             component: EditProjectComponent,             resolve: { edit: EditProjectResolve }         }     ] } 

edit-project-component.ts

ngOnInit() {     this.edit = this.route.snapshot.data.edit; } 

2. You can bypass the child's resolver all together and access parent data from within the child component.

[...module.ts | ...component.ts]

{     path: 'project/:projectId',      component: ProjectDetailComponent,     resolve: { project: ProjectResolver }     children: [         {              path: ':projectId/edit',             component: EditProjectComponent         }     ] } 

edit-project-component.ts

ngOnInit() {     this.route.parent.data         .subscribe((data) => {             this.edit = data.edit;         }); }