EventEmitter angular 2捕获事件和调试

Question

I have write a simple event emitter but it seems not working, so that's the code:

AppComponent

and main app component

@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)
    }
}

AppComponent.html

<h1>{{title}}</h1>
<menu-bar (activate)="activated($event)"></menu-bar>
<div class="router-wrapper">
    <router-outlet></router-outlet>
</div>

Download

@Component({
    .... component's configurations....
})
class Download implements OnInit{
    ... some attributes and code ...;

    @Output() activate:EventEmitter <Routes>= new EventEmitter<Routes>();
    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')
    }
}

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?
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?

Answer 1

Events from @Outputs() don't bubble and are useless in routed components.

You can only use it like <download-component (activate)="..." (listening on the component directly)

You can use a shared service to communicate between routed components and parent components like explained in https://angular.io/docs/ts/latest/cookbook/component-communication.html