Angular 2: Sibling child routes sharing same resolver

Question

I am trying to figure out if there is a more optimize way in sharing the same resolver between two sibling children routes. Below is an example of how the routes are related with the resolvers.

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
export const routes = [{
        path: '',
        component: parentComponent,
        canActivate: [AuthGuard],
        resolve: {
            someData: someDataResolver
        },
        children: [
            { path: '', redirectTo: '0', pathMatch: 'full' },
            { path: '0', 
                component: someComponent1,
                resolve: {
                    someData1: someData1Resolver,
                    someData2: someData2Resolver,
                }
            },
            { path: '2', 
                component: someComponent2,
                resolve: {
                    someData2: someData2Resolver
                }
            }
            ... a bunch more children routes/components with resolvers

        ]
    }]

Right now, I am repeating the resolvers calls for each children routes, which I believe isn't optimal. Do anyone know if there is a better way to share the data from a shared sibling child resolver? I thought about setting the data from a duplicate resolver to a shared service, which then the other child sibling route would access the data from the service (rather than making another api call in the resolver). Are there any other more optimal solutions?

score 9 · Accepted Answer · answered Oct 29 '16 at 14:51

9

You can add an additional level with a componentless parent route and move up the resolver to this level:

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
export const routes = [{
        path: '',
        component: parentComponent,
        canActivate: [AuthGuard],
        resolve: {
            someData: someDataResolver
        },
        children: [
            { path: '', 
                resolve: {
                    someData2: someData2Resolver
                },

            children: [
                { path: '', redirectTo: '0', pathMatch: 'full' },
                { path: '0', 
                    component: someComponent1,
                    resolve: {
                        someData1: someData1Resolver,
                    }
                },
                { path: '2', 
                    component: someComponent2,
                }
                ... a bunch more children routes/components with resolvers
            ]
        ]
    }]

answered Oct 29 '16 at 14:51

Günter Zöchbauer

623,577
216
2,003
1,567

How would a child component access the resolved data from the parent component? – Gambo Jan 06 '17 at 14:26
4

When the child route injects `route:ActivatedRoute` it should be able to access it using `this.route.parent.data` or `this.route.parent.snapshot.data` – Günter Zöchbauer Jan 06 '17 at 14:28
This works, thank you! What is your suggestion to reload data when e.g. the user edited an entity is navigating back to the detail view? path: ':id', component: CustomerDetailComponent, resolver: { customer: ...}, children: [ { path: 'edit', component: CustomerEditComponent....} ] The data is not reloading as the users stays within the parent route. – Gambo Jan 06 '17 at 14:40
Sorry, but I would need more details. Reload from where? – Günter Zöchbauer Jan 06 '17 at 14:42
I don't see an easy way. You could share a service at the parent component and inject it to the child and use it to pass data along. – Günter Zöchbauer Jan 06 '17 at 14:59

Angular 2: Sibling child routes sharing same resolver

1 Answers1