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