Trigger guard to re-render component when change url manually via browser

Question

I setup routing like this

{
     path: ':parent', component: ParentComponent,
     resolve: { data: ParentResolve },
     children: [
         {
              path: ':child', component: ChildComponent,
              resolve: {
                   data: ChildResolve
              }
         }
}

Everything works normally but when I change my url from /:parent/:child to /:parent. I want to redirect to child route with param get from ParentResolve.

My problem: Angular does not call Resolve guard when I change url by hand so I can't redirect to child route.

Please ask me if you're not clear, thank you.

can you please clarify more what is it that you are looking for — Rahul Singh, Aug 15 '17 at 07:56

score 1 · Answer 1 · answered Aug 15 '17 at 08:06

The 'resolve' part in router config is handling all of the route fetching before it's been activated. That's mean that it will be called when you are entering this route form any other route and not from it's own children (Because the route is already activated).

I think the best way to approach this issue is to add route change event listener into your ParentComponent and handle it over there.

Try you to something like this:

export class ParentComponent implements OnInit, OnDestroy {
  routeEventSubscription$;
  routerData;
  constructor(private activatedRoute: ActivatedRoute,
              private router: Router) {
    this.name = `Angular! v${VERSION.full}`
  }

   ngOnInit() {
    this.subscribeToRouteChange();
  }

  subscribeToRouteChange(){
    this.routerData=this.activatedRoute.snapshot.params['data'] //Your router resolver data.
    this.routeEventSubscription$ = this.router.events
      .filter(event => event instanceof NavigationStart) //Subscribe only to NavigationStart event
      .subscribe(event => {
        this.routeToChild();
      });
  }

  routeToChild(){
    /**
     * Add your logic here.
     * Use this.routerData as you.
     */
  }



  ngOnDestroy(){
    //Dont forget to unsubscribe routeEventSubscription$!
    this.routeEventSubscription$.unsubscribe();
  }
  }

You can read more about route data resolve here and here

Thanks your comment, I tried put navigate in `routeToChild` as `this.router.navigate(['./', childRoute ], { relativeTo: this.route });`. Do you know any reason ? — Thien Hoang, Aug 15 '17 at 10:04

Trigger guard to re-render component when change url manually via browser

1 Answers1