title: EventEmitter angular 2 catching event and debugging
body: <p>I have write a simple event emitter but it seems not working, so that's the code:</p>
  
  <h1>AppComponent</h1>
  
  <p>and main app component</p>
  
  <pre><code>@Component({
      selector:'my-app',
      templateUrl:'app/app.component.html',
      styleUrls:['app/app.component.css'],
      directives:[ROUTER_DIRECTIVES,MenuBar],
  })
  export class AppComponent{
      title:'My App'
      activated(event:Routes){
          console.log('activated');
          console.log(received)
      }
  }
  </code></pre>
  
  <h1>AppComponent.html</h1>
  
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;menu-bar (activate)="activated($event)"&gt;&lt;/menu-bar&gt;
  &lt;div class="router-wrapper"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>Download</h1>
  
  <pre><code>@Component({
      .... component's configurations....
  })
  class Download implements OnInit{
      ... some attributes and code ...;
  
      @Output() activate:EventEmitter &lt;Routes&gt;= new EventEmitter&lt;Routes&gt;();
      r:Routes={};
      test(): void{
          console.log('emit start')
          console.log(this.r);
          try{
              this.activate.emit(this.r)
          }
          catch(err){
              console.log(err)
          }
          console.log('sent')
      }
  }
  </code></pre>
  
  <p>the download component is inside a router-outlet.
  So first of all, I see all the console.log messages of the Download component but I see no message in the app component is there any reason? What am I doing wrong?<br>
  Second one, I think (but maybe I'm wrong) that the problem is in the message propagations, so I would like to debug the emit and catch the events globally, is it possible? And if it is so, how shall I do that?</p>