Angular 6: Skip parent route resolver in child route?

2
votes

I'm trying to add routes to my app, and I have a parent route with parentResolver and a child route with Child Resolver. When I access the '/parent', the parent resolver kicks in perfectly.

But the problem is, when I access '/parent/child', the parent resolver kicks in again before the child resolver can kick in. I don't want to run the parent resolver when I'm navigating to a child page.

So is there a way to skip the parent resolver when child route is called. Here's my route config

{
    path: 'parent',
    component: ParentComponent,
    resolve: {parentData: ParentResolver},
    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
    children: [
      {
        path: 'child',
        component: ChildComponent,
        resolve: {childData: ChildResolver},
        runGuardsAndResolvers: 'paramsOrQueryParamsChange'
      }
    ]
  }
3
angular
You can define route without using resolver as well. - Exterminator
I'm using the resolver. For parent route and child route. So if the url is <url>/parent?someparam=somevalue, the parent resolver uses the queryparam. And same should happen with child resolver. - ChaoticTwist
thats what i am telling you can do it without using it. i can share routing code where you can define route without using them - Exterminator
@Exterminator I get that it can be done without. But I need resolvers. - ChaoticTwist
Could it be, that your ParentComponent is not a true parent, if it's behavior changes when a child is present. So maybe you can split it into what is needed generally (parent route without resolver) and what is needed only if no child is present (new route with parentresolver). - Jürgen Röhr

3 Answers

1
votes

  1. Check in parent resolver what is target path. (or if ActivatedRouteSnapshot has children)

    resolve(route: ActivatedRouteSnapshot) {

  if (route.children.length) {
    // target is some child
  } else {
    // target is parent
  }

    }

  2. Create standalone path: 'parent/child'

1
votes

Try the following:

{
    path: 'parent',
    children: [
               {  path : '',
                  pathMatch : 'full',
                  component: ParentComponent,
                  resolve: {parentData: ParentResolver},
                  runGuardsAndResolvers: 'paramsOrQueryParamsChange',
               },
               {  path: 'child',
                  component: ChildComponent,
                  resolve: {childData: ChildResolver},
                  runGuardsAndResolvers: 'paramsOrQueryParamsChange'
               }
             ]
}
0
votes

You can create what I call a ResolverGuard, which is a Guard that acts as a Resolver.

{
path: 'parent',
component: ParentComponent,
resolve: [ParentResolver], // simply return an Observable<boolean>
runGuardsAndResolvers: 'paramsOrQueryParamsChange',
children: [
  {
    path: 'child',
    component: ChildComponent,
    canActivate: [ChildResolverGuard],
    runGuardsAndResolvers: 'paramsOrQueryParamsChange'
  }
]

}

However, this will simply run the child guard before the parent Resolver. The resolver will run regardless, but you can add logic in the ParentResolver to skip it if the child Guard ran.

Checkout https://github.com/angular/angular/issues/20805#issuecomment-350106463