Angular 2 Intercepting route events and then routing later

Question

I have an angular 2 application, and would like to intercept route events, prevent them from happening, play an animation and then continue to route.

My thoughts are this

if I have a class

export class SomeComponent {
    constructor(private router: Router){
        router.events.subscribe(evt => {
            if(evt instanceof NavigationStart){
                //I would like to cancel the event here the first time, and then 
                //play an animation, after the animation is done, trigger the router
                //to go to the original route it wanted to.
            }
        })
    }
}

Is there a way to stop that router from finishing the navigation process?

Could you append something like ?showAnimation to the URL and everytime a url change happens, it checks if that flag is there, and if so, does an animation before moving to the original route's address? — Pytth
– Pytth, Commented Jan 17, 2017 at 19:23

Madhu Ranjan · Accepted Answer · 2017-01-17 19:12:08Z

you may create a CanActivate guard for the parent Route, where you may stop navigation based upon some Global variable, The variable may have the value based upon if the animation has been shown or not.

So what you may do is,

export class AnimationGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if(HasAnimationRun){
      return true;
    }
    runAnimation(state.url);
    return false;
  }
}

runAnimation(url){
  // run animation
  // set global variable.
  // navigate to url
}

Collectives™ on Stack Overflow

Angular 2 Intercepting route events and then routing later

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related