CODEWITHSUNDEEP
angularangular-router-guards
Thien Hoang
Thien Hoang

Reputation: 625

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

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.

Upvotes: 0

Views: 1480

Answers (1)

Gili Yaniv
Gili Yaniv

Reputation: 3211

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

Upvotes: 1

Related Questions