Navigation from ion-tab where ion-nav is in the parent view

Ionic Framework ionic-v3
1

In my app, I do have a home page that contains ion-tabs and ion-menu
in the ion-tab of the ion-tabs , I do have a ion-fab button to navigate to an other page.
The following code concern the home page that contain the ion-tabs and ion-menu

  <ion-menu [content]="navigation">
  <ion-header  style="height: 50px ; color: #009688">
    <ion-navbar>
      <h3 style="font-size: 100% !important;color:white!important;"> Welcome {{this.global.getMyGlobalVar()}}</h3>

    </ion-navbar>

  </ion-header>

  <ion-content>

    <ion-list>
      <button menuClose ion-item (click)="openPage(pages[0])">
        <ion-icon name="person" item-start style="color: #17a01e"></ion-icon>
        Profile
      </button>

      <button ion-item>
        <ion-icon name="person-add" item-start style="color:#17a01e"></ion-icon>
        Connect
      </button>

      <button menuClose ion-item (click)="openPage(pages[1])">
        <ion-icon name="settings" item-start style="color: #17a01e"></ion-icon>
        Settings & Privacy
      </button>

      <button ion-item>
        <ion-icon name="help-circle" item-start style="color: #17a01e"></ion-icon>
        Help
      </button>

    </ion-list>

  </ion-content>
</ion-menu>

<ion-nav #navigation  ></ion-nav>

<ion-tabs tabsHighlight="true"  tabsPlacement="top" style="width: 100%" >
  <ion-tab  [root]="tab1Root" [rootParams]="homeParams"  tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="notifications"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="mail"></ion-tab>
</ion-tabs>

And here is the code of one of the ion-tab pages

<ion-header >

  <ion-navbar  >
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title> Home </ion-title>
  </ion-navbar>

</ion-header>

<ion-content>

  <ion-fab right bottom >
    <button color="secondary" icon-only  (click)='navigate()' ion-fab>
      <ion-icon name="ios-megaphone-outline"  large>
      </ion-icon>

    </button>
  </ion-fab>

</ion-content>

I’m wondering about the way to use, to navigate from the ion-tab page to the new page when clicking on ion-fab
When reading in the ionic official documentation i found many ways :

  • injecting the navController in the page constructor
  • calling the nav from the view if we are in the root app page by using @ViewChild(‘ref’)
  • using the appController to call the navController when we are in an overlay page as follow : this.appCtrl.getRootNav.push(‘NewPage’)

Waiting for your help and orientation to choose the best navigation way and the correct one
Thanks in advance