Angular pass resolve data to child-routes

Issue

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.

Solution

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;
        });
}

Answered By – Desmond

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.