Eventemitter from inside ion-nav contained component?

I’m having trouble with transitioning from one page to another within an ion-nav. What I want to achieve, is that I use ion-nav for switching between various components (which contain their HTML in an ion-content), while passing some data along with it.

I’m trying to use an Eventemitter onNavigate in one of these components that is contained by the ion-nav, so I can handle the NavController navigation with the event onNavigate that is triggered, from within the “parent” component.

The problem is that the event is emitted (get a console log that reports the start of the function which emits the event), but it never seems to “arrive” at the ion-nav, which is where I handle the event.

I know that I should put (onNavigate)='onNavigate(event)' on <cocap-home></cocap-home>, but since I use ion-nav with cocap-home inside it, I can’t put it in there, as <cocap-home></cocap-home> is not ‘physically’ present in my markup…

How could I achieve my desired effect (navigating to a component, while sending some extra data along with it)?

This is my setup.

map.ts (which contains the NavController, and with which I want to handle the navigation to a different component within ion-nav)

import {Component,ElementRef} from '@angular/core';
import {Platform, NavController} from 'ionic-angular';
import {CocapHead} from '../../nav/nav';
import {HomePage} from '../../home/home';
import {SecondPage} from '../../SecondPage/SecondPage';
import {GoogleMap, GoogleMapsEvent,GoogleMapsLatLng, Geolocation} from 'ionic-native';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
@Component({
  selector: 'cocap-map',
  directives: [CocapHead,HomePage,SecondPage],
  providers: [NavController],
  templateUrl: 'build/pages/backdrop/map/map.html'
})
export class BGMap {
    private root: any = HomePage;
    private pages: {
        "home" : HomePage,
        "secondPage" : SecondPage
    };
    constructor(private platform: Platform, private el: ElementRef, public navCtrl: NavController) {
        platform.ready().then(() => {
            let map = new GoogleMap('mapCanvas');
            let mapEl = el.nativeElement.querySelector('#mapCanvas');
            map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
                map.setDiv(el.nativeElement.querySelector('#mapCanvas'));
                map.setMapTypeId("MAP_TYPE_HYBRID");
                map.setBackgroundColor("#FFF");
                Geolocation.getCurrentPosition().then((resp)=>{
                    map.setCenter(new GoogleMapsLatLng(resp.coords.latitude, resp.coords.longitude));
                    map.setZoom(15);
                    map.animateCamera({
                        target: new GoogleMapsLatLng(resp.coords.latitude, resp.coords.longitude),
                        zoom: 15,
                        duration: 500
                    });
                });
            });
        });
    }
    onNavigate(event){
        console.log("onNavigate @ maps.ts:",event);
        this.pushPage(event.page,event.params);
    }
    pushPage(page: any, params: any){
        console.log("pushPage:",page," && params: ",params);
        this.navCtrl.push(this.pages[page],params);
    }
}

map.html (containing the ion-nav with one of the components as root)

<div id='mapCanvas'>
    <cocap-head style='position: relative; z-index: 12; display: block;'></cocap-head>
    <ion-menu side="left" [content]="appParent">
    </ion-menu>

    <ion-nav #appParent [root]="root" (onNavigate)="onNavigate($event)">

    </ion-nav>
    <ion-menu side="right" [content]="appParent">
    </ion-menu>
</div>

home.html (containing the click-trigger which triggers the Eventemitter onNavigate)

<ion-content class="home">
    <ion-list>
        <button medium block color="cocap-white">Start event</button>
        <ion-card tappable *ngFor="let event of events" (click)='gotoPage("secondPage", {"scapeID":"$event.scapeID", "title":"$event.name"})'>
            <!--...contents fetched from the event object -->
        </ion-card>
    </ion-list>
</ion-content>

home.ts

import {Component, OnInit, EventEmitter, Output} from '@angular/core';
import {HomeService} from '../../services/home-service';
@Component({
  selector: 'cocap-home',
  templateUrl: 'build/pages/home/home.html',
  providers: [HomeService]
})
export class HomePage {
    events;
    @Output() onNavigate = new EventEmitter();
    constructor(private homeService: HomeService) {
        this.homeService = homeService;
    }
    ngOnInit(){
        this.homeService.fetchHomeList().subscribe(
            data => this.events = data
        )
    }
    gotoPage(page: any, params: any){
        console.log("gotoPage: onNavigate?");
        console.log("onNavigate: ",this.onNavigate);
        this.onNavigate.emit({page: page, params: params});
    }
}

Did you ever progress this? I would like to do the same thing but not sure how.
Thanks!