Hi,
I’ll be very brief with mi english because I’m very bad with it, this is my code (I resume the line code who is giving me problem at the end):
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, Events } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public events: Events) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 },
{ title: 'Home', component: HomePage }
];
}
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
app.html
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
home.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
posts: any;
constructor(public http: Http) {
this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe(
data => {
this.posts = data.data.children;
console.log("Done!");
},
err => {
console.log("Oops!");
});
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let post of posts">
<img [src]="post.data.url" />
</ion-item>
</ion-list>
</ion-content>
page1.ts
import { Component } from '@angular/core';
import { NavController, Platform, Events } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
@Component({
selector: 'page-page1',
templateUrl: 'page1.html'
})
export class Page1 {
map: GoogleMap;
constructor(public navCtrl: NavController, public platform: Platform, public events: Events) {
platform.ready().then(() => {
this.loadMap();
})
this.events.subscribe('menu:opened', () => {
this.map.setClickable(false);
});
this.events.subscribe('menu:closed', () => {
this.map.setClickable(true);
});
}
loadMap(){
let location = new GoogleMapsLatLng(-34.9290,138.6010);
this.map = new GoogleMap('map', {
'backgroundColor': 'white',
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': location,
'tilt': 30,
'zoom': 15,
'bearing': 50
}
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
});
}
}
page1.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Mapa</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div id="map"></div>
</ion-content>
Well, the thing is that I publish this events:
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
because I use a google map pluggin and I need to setClickable off when the menu is open, but my http.get request doens’t work when I add that, I comment thoes lines and my request works perfectly, I don’t understand why, can help me please?