5

In angular2 what is the equivalent of these angular1 events?

$routeChangeStart , $routeChangeSuccess ,$routeChangeError

I want to use these events in root app component to deal with any route changing.

thanks in advance

update

  • If i use OnActivate, OnDeactivate events, it needs to add it to every component :(

  • Also i tried to implement my own RouterOutlet but i can't access previous instruction on activate, deactivate events, also i don't know how to handle the route Change Error

  • Also router.subscribe gave me the name only but i want to get the current and next instruction objects to change some properties

My target is:

1- Show loading indicator when start change page and hide it on page load.

2- Make transition animation rtl or ltr for current and next instruction

danday74
  • 52,471
  • 49
  • 232
  • 283
Bahgat Mashaly
  • 510
  • 7
  • 15
  • 1
    i solve the problem for any one face this problem , you can make your own RouterOutlet directive which inherit from RouterOutlet then use it as a proxy – Bahgat Mashaly Jan 03 '16 at 15:03
  • 1
    Have you some sample? any plunkr? – Javier Ros Mar 15 '16 at 09:47
  • 2
    @JavierRos there are some posts & projects if you search for *angular2 custom router outlet*. Some of those are from [captaincoder](http://www.captaincodeman.com/2016/03/31/angular2-route-security/), [auth0](https://github.com/auth0-blog/angular2-authentication-sample/blob/master/src/app/LoggedInOutlet.ts), [blacksonic](http://stackoverflow.com/questions/34331478/angular2-redirect-to-login-page/35817366#35817366) – superjos Apr 22 '16 at 00:01

2 Answers2

3

There are some events such as OnActivate, OnDeactivate and guard functions CanActivate and CanDeactivate that you can look at.

See the documentation for Router

Chandermani
  • 42,589
  • 12
  • 85
  • 88
  • 1
    these events work in component level , i want to cover all route changing in root app component , i want to cover change in root app component – Bahgat Mashaly Nov 05 '15 at 11:09
  • 1
    The component hooks are different https://angular.io/docs/ts/latest/api/lifecycle_hooks/ – Chandermani Nov 05 '15 at 11:25
  • 1
    thanks Chandermani for trying to help me i read component hooks but it's help us for watching changing values of properties (any property) but route not a property – Bahgat Mashaly Nov 05 '15 at 12:36
  • 1
    i can deal with route location as property but it will not catch all routing events like $routeChangeSuccess ,$routeChangeError , it will not deal with routing as a routing but only as a property – Bahgat Mashaly Nov 05 '15 at 12:38
  • 1
    - if i use OnActivate, OnDeactivate events , but it need to add it to every component :( - also i tried to implement my own RouterOutlet but i can't access previous instruction on activate , deactivate events, also i couldn't know how to handle route Change Error -also router.subscribe gave me the name only , but i want to get the current and next instruction objects to change some properties my target is: 1- show loading indicator when start change page , and hide it when finish change page. 2- make transition animation rtl or ltr for current and next instruction – Bahgat Mashaly Nov 07 '15 at 07:27
  • i solve the problem for any one face this problem , you can make your own RouterOutlet directive which inherit from RouterOutlet then use it as a proxy – Bahgat Mashaly Jan 03 '16 at 15:03
2

i solved the problem, for any one who face this problem , you can make your own RouterOutlet directive which inherit from RouterOutlet then use it as a proxy

Bahgat Mashaly
  • 510
  • 7
  • 15