How to listen for Angular 2 native page change event and prevent default?

Question

How can I listen for the event that is triggered when route change starts? How can I stop that event? It looks as though the event object doesn't have any methods that can stop this according to the docs .

this.router.events
  .filter(event => event instanceof NavigationStart)
  .subscribe((event) => {
    console.log(event);
    event.preventDefault(); // NavigationStart doesn't have this method
  });

After stopping it, how can I programmatically trigger route change again?

My end goal is to delay the route change for about 1 second to allow page change animations to complete. So, page change animations on exit.

Answer 1

in the HTML it would be:

(click)="timedFunction()"

and the function would carry out a timed animation and route after it has completed.

After the time animation completes:

this.router.navigate([route])

Answer 2

Yo don't need to handle this case manually, Angular will do this for you

just use [Route resolver] https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

the result of this function can be an observable o promise the page will be loaded when this promise resolved or observable finished

the demo for delaying page load: http://embed.plnkr.co/u2qR9J/

but to answer your first question related to registering event see this: Show loading screen when navigating between routes in Angular 2

start the animation in [Route resolver] and resolve the promise when the animation finished