Hello Guys,
I’m just starting with ionic and angular, so this might be pretty stupid…
I’m trying to call a function in my nav’s root page (custom MapPage component), from ion-menu, but I’m not sure how to do it.
Currently I’m trying to call it with this.rootPage.myFunction(param)
from app.ts, but that throws an TypeError: this.rootPage.myFunction is not a function
exception.
This is my code:
app.ts
import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, MenuController, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {MapPage} from './pages/map/map';
@Component({
templateUrl: 'build/app.html'
})
export class MyApp {
rootPage: any = MapPage;
mapOverlays: Array<{id: any, title: string}>;
constructor(public platform: Platform, public menu: MenuController ) {
this.initializeApp();
this.mapOverlays = [
{ id: 1, title: 'overlay 1'},
{ id: 2, title: 'overlay 2'},
{ id: 3, title: 'overlay 3'}
];
}
initializeApp() {
this.platform.ready().then(() => {
StatusBar.styleDefault();
});
}
enableOverlay(overlay) {
//Problem line:
this.rootPage.myFunction(overlay);
}
}
ionicBootstrap(MyApp);
app.html
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Page Title</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ngFor="let m of mapOverlays" (click)="enableOverlay(m)">
{{m.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
map.ts:
import {Component} from '@angular/core';
import {Platform, MenuController} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/map/map.html',
})
export class MapPage {
constructor( public platform: Platform, public menu: MenuController) {
this.platform.ready().then(() => {
//set up map
});
}
myFunction(overlay) {
//do something
}
}
Based on this discussion I thought ViewChild could help me, since the MapPage component is a child, but it’s parent is the nav; so I’m lost as to how to apply that here.
Any guidance would be greatly appreciated.