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.

What's the actual problem you're trying to solve? If you want to prevent navigation, see http://stackoverflow.com/q/39061623/3001761. Why do you want to start it again afterwards? — jonrsharpe, May 08 '17 at 21:40
Could you give a [mcve] that includes the context? Otherwise people end up solving an http://xyproblem.info. — jonrsharpe, May 08 '17 at 21:43
Add a click event that uses a timer, then when that timer runs out, you navigate with this.router.navigate([route]) — David Aguirre, May 08 '17 at 21:45
So something like `page` with my own directive? @DavidAguirre — Jeff, May 08 '17 at 21:48
in the HTML it would be (click)="timedFunction()" and the function would carry out a timed animation and route after it has completed. — David Aguirre, May 08 '17 at 21:50
Thanks! That worked! You can post as answer. I'll rephrase the question if needed. — Jeff, May 08 '17 at 22:04

score 0 · Accepted Answer · answered May 08 '17 at 22:35

0

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])

answered May 08 '17 at 22:35

David Aguirre

1,382
4
15
29

score -1 · Answer 2 · edited May 23 '17 at 11:54

-1

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

edited May 23 '17 at 11:54

Community

1
1

answered May 08 '17 at 22:13

Mahmood Sajjadi

422
5
12

This has some potentially useful information but consists mainly of off site links. Please edit to show how the OP could apply these ideas to solve their problem. – jonrsharpe May 08 '17 at 22:17

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

2 Answers2