Angular 2 Capturing route events and then routing later

Question

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

My thoughts are:

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 any way to stop this router from completing the navigation process?

Answer 1

you can create CanActivate protection for the parent route, where you can stop navigation based on some global variable. This variable can have a value based on whether the animation was shown or not.

So what can you do

 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!