Home page appears after navigating to another page

Ionic Framework ionic-v3
1

Hello everyone,

I have problem when I am navigating from a component. When I navigate from page everything works fine. But when I navigate from my custom component new page is shown and right after that home page overlaps it. My URL stays at the new page but the page that is displayed is the home page. For more info:

I am creating simple app that is basically a presentation of a different products.I wanted to try Ionic 3. I have ~10 pages that should be changed on a swipe left/right. Also at the bottom of every page I have navigation buttons(home, previous and next). All the navigation is handled in app.component which is subscribed for 3 events: next, prev and home page. In every page controller I am firing the events on swipe and it it working fine. But in the footer navigation I am using single component which is firing the same 3 events. After a click the events are fired. next page is pushed and the page transition appears, but just after the new page arrives on the screen the home page overlaps it. Does anyone have any idea why is that happening and how to fix that? Or am I doing something wrong?

In app.component.ts I am subscribing in platform.ready:

    this.events.subscribe('page:prev', () => {
      this.prevPage();
    });
    this.events.subscribe("page:next", () => {
      this.nextPage();
    });
    this.events.subscribe("page:home", () => {
      this.homePage();
    });

In every page i have two methods that are fired on swipe left/right:

  prevPage(event){
    this.events.publish("page:prev", event);
  }

  nextPage(event){
    this.events.publish("page:next", event);
  }

And here is page-footer component for every page:

<ion-footer>
  <ion-toolbar>
    <ion-buttons left>
      <a href="#" (click)="navigateToHome($event)"><ion-icon name="home"></ion-icon></a>
    </ion-buttons>
    <ion-buttons right>
      <a href="#" (click)="navigateToPrev($event)"><ion-icon name="arrow-round-back"></ion-icon></a>
      <a href="#" (click)="navigateToNext($event)"><ion-icon name="arrow-round-forward"></ion-icon></a>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

  navigateToHome(event){
    this.events.publish('page:home', event);
  }

  navigateToPrev(event){
    this.events.publish('page:prev', event);
  }

  navigateToNext(event){
    this.events.publish('page:next', event);
  }

After every navigation event I am using a provider to determine which is the next page and this method is called:

// animation: forward/back direction: forward/back 
  private _navigateToPage(pageData: PageNavData){
    this.navCtrl.push(pageData.name, {}, { animate: true, animation: pageData.animation, direction: pageData.direction });
  }


Here is a video with the sample application