i have the following Component Structure
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.
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;
});
}
You just need to do this in child components:
ngOnInit() {
this.route.parent.data
.subscribe((data) => {
this.edit = data.edit;
});
}