Http request doesn't working when I use event.publish

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?