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?

Answer 1

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
}

Read more about CanActivate here.

Hope this helps!!