title: Angular 2 router event listener
body: <p>How to listen state change in Angular 2 router?</p>
  
  <p>In Angular 1.x I used this event:</p>
  
  <pre><code>$rootScope.$on('$stateChangeStart',
      function(event,toState,toParams,fromState,fromParams, options){ ... })
  </code></pre>
  
  <p>So, if I use this eventlistener in Angular 2:</p>
  
  <pre><code>window.addEventListener("hashchange", () =&gt; {return console.log('ok')}, false);
  </code></pre>
  
  <p>it isn't return 'ok', then change state from JS, only then browser history.back() function run.</p>
  
  <p>Use router.subscribe() function as the service:</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Router} from 'angular2/router';
  
  @Injectable()
  export class SubscribeService {
      constructor (private _router: Router) {
          this._router.subscribe(val =&gt; {
              console.info(val, '&lt;-- subscribe func');
          })
      }
  }
  </code></pre>
  
  <p>Inject service in component which init in routing:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Router} from 'angular2/router';
  
  @Component({
      selector: 'main',
      templateUrl: '../templates/main.html',
      providers: [SubscribeService]
  })
  export class MainComponent {
      constructor (private subscribeService: SubscribeService) {}
  }
  </code></pre>
  
  <p>I inject this service in other components such as in this example. Then I change state, console.info() in service not working.</p>
  
  <p>What I do wrong?</p>